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>