meteor uihooks for 3d box transtion

uihook

Template.portfolioHoldings.rendered = ->
  @find('.js-holdings-list')._uihooks =
    insertElement: (node, next) ->
      $node = $(node)
      if $node.hasClass('js-placeholder-holding-wrapper') or $node.hasClass('js-holding-search-wrapper')
        console.log 'inserting...'
        $node.insertBefore(next)
        $node.css(
          "z-index": "1000"
          transform: "translateY(50%) rotateX(90deg)",
        )
        Meteor.defer(->
          $node.css(
            transform: "translateY(0%) rotateX(0deg)",
            transition: "transform 0.5s"
          )
        )
      else
        $node.insertBefore(next)
    removeElement: (node) ->
      $node = $(node)
      if $node.hasClass('js-placeholder-holding-wrapper') or $node.hasClass('js-holding-search-wrapper')
        console.log 'removing...'
        $node.css(
          top: "0px"
          position: "absolute"
          transform: "translateY(-50%) rotateX(90deg)"
          transition: "transform 0.5s"
        )
        setTimeout(->
          $node.remove()
        , 500)
      else
        $node.remove()


Template.holdingItem.rendered = ->
  console.log 'details:', @find('.js-holding-details')
  @find('li.item')._uihooks =
    insertElement: (node, next) ->
      console.log 'INSERT'
      $node = $(node)
      $node.insertBefore(next)
      if $node.hasClass('js-holding-details')
        Meteor.defer(->
          $node.css(transform: 'scaleY(1)')
        )
        console.log('$node:', $node)
    removeElement: (node) ->
      console.log 'REMOVE'
      $node = $(node)
      if $node.hasClass('js-holding-details')
        Meteor.defer(->
          $node.slideUp(-> $node.remove())
        )
      else
        $node.remove()