ant-design-vue/components/vc-tree/demo/animation.vue

<script>
/* eslint no-console:0 */
import Tree, { TreeNode } from '../index'
import '../assets/index.less'
import cssAnimation from '../../_util/css-animation'

function animate (node, show, done) {
  let height = node.offsetHeight
  return cssAnimation(node, 'collapse', {
    start () {
      if (!show) {
        node.style.height = `${node.offsetHeight}px`
      } else {
        height = node.offsetHeight
        node.style.height = 0
      }
    },
    active () {
      node.style.height = `${show ? height : 0}px`
    },
    end () {
      node.style.height = ''
      done()
    },
  })
}

const animation = {
  enter (node, done) {
    return animate(node, true, done)
  },
  leave (node, done) {
    return animate(node, false, done)
  },
}
export default {
  render () {
    return (
      <div>
        <h2>expanded</h2>
        <Tree
          defaultExpandAll={false}
          defaultExpandedKeys={['p1']}
          openAnimation={{ on: animation, props: { appear: true }}}
        >
          <TreeNode title='parent 1' key='p1'>
            <TreeNode key='p10' title='leaf'/>
            <TreeNode title='parent 1-1' key='p11'>
              <TreeNode title='parent 2-1' key='p21'>
                <TreeNode title='leaf'/>
                <TreeNode title='leaf'/>
              </TreeNode>
              <TreeNode key='p22' title='leaf'/>
            </TreeNode>
          </TreeNode>
        </Tree>
      </div>
    )
  },
}

</script>
<style>
.collapse {
  overflow: hidden;
  display: block;
}

.collapse-active {
  transition: height 0.3s ease-out;
}
</style>