Ver código fonte

tree selection页优化动画体验

任一存 3 anos atrás
pai
commit
d490989371
1 arquivos alterados com 9 adições e 3 exclusões
  1. 9 3
      src/views/TreeSelection.vue

+ 9 - 3
src/views/TreeSelection.vue

@@ -33,7 +33,7 @@
         </h2>
       </div>
       <div
-        v-show="currentTab === 1"
+        v-show="(currentTab === 1) || (currentTab === -1)"
         class="title-wrapper wuyiba"
       >
         <h2 class="title">
@@ -71,7 +71,10 @@
         </router-link>
       </div>
       <div
-        :class="currentTab === 1 ? 'active' : ''"
+        :class="{
+          'active': currentTab === 1,
+          'initial-active': currentTab === -1,
+        }"
         class="tree-wrapper wuyiba"
       >
         <img
@@ -180,7 +183,7 @@ import { mapGetters } from 'vuex'
 export default {
   data() {
     return {
-      currentTab: 1
+      currentTab: -1
     }
   },
   computed: {
@@ -311,6 +314,9 @@ export default {
         animation: emerge 1s;
         opacity: 1;
       }
+      &.initial-active {
+        opacity: 1;
+      }
       &.theme .link {
         background: #18489D;
       }