try nodes collapsing animation

Author: phphe

src/App.vue

@@ -3,13 +3,16 @@
 #app
   BaseTree.mr
   MaxLevelTree.mr
+  CollapsingAnimation.mr
 </template>
 
 <script>
 import BaseTree from '@/examples/Base'
 import MaxLevelTree from '@/examples/MaxLevel'
+import CollapsingAnimation from '@/examples/CollapsingAnimation'
+
 export default {
-  components: {BaseTree, MaxLevelTree},
+  components: {BaseTree, MaxLevelTree, CollapsingAnimation},
   // data() {
   //   return {
   //   }

src/examples/CollapsingAnimation.vue

@@ -0,0 +1,85 @@
+<!-- this is an example -->
+<template lang="pug">
+div
+  h2 Collapse Animation
+  Tree(:data="originalData" draggable crossTree ref="tree1" @change="tree1Change" @drag="ondrag" @drop="ondrop")
+    div(slot-scope="{data, store}")
+      b(v-if="data.children && data.children.length" @click="store.toggleOpen(data)") {{data.open ? '-' : '+'}}&nbsp;
+      span {{data.text}}-level:{{data.level}}
+</template>
+
+<script>
+import Tree0 from '@/components/DraggableTree'
+import CustomTreeNode from './CustomTreeNode.vue'
+
+const Tree = {
+  extends: Tree0,
+  components: {
+    TreeNode: CustomTreeNode,
+  },
+  data() {
+    return {
+      nodesTransition: 'fade',
+    }
+  },
+}
+
+export default {
+  components: {Tree},
+  data() {
+    return {
+      originalData: [
+        {text: 'node 1'},
+        {text: 'node 2'},
+        {text: 'node 3'},
+        {text: 'node 4'},
+        {text: 'node 4 undroppable', droppable: false},
+        {text: 'node 5', children: [
+          {text: 'node 1'},
+          {text: 'node 2', children: [
+            {text: 'node 3'},
+            {text: 'node 4'},
+          ]},
+          {text: 'node 2 undroppable', droppable: false, children: [
+            {text: 'node 3'},
+            {text: 'node 4'},
+          ]},
+          {text: 'node 2', children: [
+            {text: 'node 3'},
+            {text: 'node 4 undroppable', droppable: false},
+          ]},
+          {text: 'node 3'},
+          {text: 'node 4'},
+          {text: 'node 3'},
+          {text: 'node 4'},
+          {text: 'node 3'},
+          {text: 'node 4'},
+          {text: 'node 3'},
+          {text: 'node 4'},
+        ]},
+      ],
+      data: null,
+    }
+  },
+  // computed: {},
+  // watch: {},
+  methods: {
+    tree1Change(node, targetTree) {
+      this.data = targetTree.getPureData()
+    },
+    ondrag() {
+      const tree = this.$refs.tree1
+      tree.nodesTransition = null
+    },
+    ondrop() {
+      const tree = this.$refs.tree1
+      tree.nodesTransition = 'fade'
+    },
+  },
+  // created() {},
+  // mounted() {},
+}
+</script>
+
+<style lang="scss">
+</style>

src/examples/CustomTreeNode.vue

@@ -0,0 +1,34 @@
+<template lang="pug">
+.tree-node(
+  :class="[data.active ? store.activatedClass : '', data.open ? store.openedClass : '', data.class]"
+  :id="data._id" :data-level="data.level"
+)
+  .tree-node-inner-back(v-if="!isRoot" :style="[innerBackStyle, data.innerBackStyle]" :class="[data.innerBackClass]")
+    .tree-node-inner(:style="[data.innerStyle]" :class="[data.innerClass]")
+      slot(:data="data" :store="store")
+  transition(:name="store.nodesTransition")
+    .tree-node-children(v-if="childrenVisible")
+      TreeNode(v-for="child in data.children" :key="child._id"
+        :data="child" :store="store"
+      )
+        template(slot-scope="props")
+          slot(:data="props.data" :store="props.store")
+</template>
+
+<script>
+import DraggableTreeNode from '@/components/DraggableTreeNode'
+
+export default {
+  name: 'TreeNode',
+  extends: DraggableTreeNode,
+}
+</script>
+
+<style lang="scss">
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+</style>