diff --git a/docs/vue2.html b/docs/vue2.html index 6fbfa69f..e4baab88 100644 --- a/docs/vue2.html +++ b/docs/vue2.html @@ -1147,6 +1147,297 @@
  • <script type="text/x-template">
    • +

    过渡 & 动画

    +

    单元素/组件的过渡

    + +
    <template>
+  <button v-on:click="show = !show">
+    切换
+  </button>
+  <transition name="fade">
+    <p v-if="show">切换内容</p>
+  </transition>
+</template>
+
+<script>
+  export default {
+    data: function() {
+      return {
+        show: true
+      };
+    }
+  };
+</script>
+
+<style scoped>
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .5s;
+  }
+  /* .fade-leave-active 低于 2.1.8 版本 */
+  .fade-enter, .fade-leave-to {
+    opacity: 0;
+  }
+</style>
+
    +

    CSS 过渡

    + +
    <template>
+  <button @click="show = !show">
+    切换渲染
+  </button>
+  <transition name="slide-fade">
+    <p v-if="show">切换内容</p>
+  </transition>
+</template>
+<script>
+  export default {
+    data: function() {
+      return {
+        show: true
+      };
+    }
+  };
+</script>
+<style scoped>
+  /* 可以设置不同的进入和离开动画 */
+  /* 设置持续时间和动画函数 */
+  .slide-fade-enter-active {
+    transition: all .3s ease;
+  }
+  .slide-fade-leave-active {
+    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+  }
+  /* .slide-fade-leave-active 用于 2.1.8 以下版本 */ 
+  .slide-fade-enter, .slide-fade-leave-to {
+    transform: translateX(10px);
+    opacity: 0;
+  }
+</style>
+
    +

    CSS 动画

    + +
    <template>
+  <button @click="show = !show">切换展示</button>
+  <transition name="bounce">
+    <p v-if="show">切换内容</p>
+  </transition>
+</template>
+<script>
+  export default {
+    data: function() {
+      return {
+        show: true
+      };
+    }
+  };
+</script>
+<style scoped>
+.bounce-enter-active {
+  animation: bounce-in .5s;
+}
+.bounce-leave-active {
+  animation: bounce-in .5s reverse;
+}
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>
+
    +

    过渡的类名

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    :-:-
    v-enter定义进入过渡的开始状态 #
    v-enter-active定义进入过渡生效时的状态 #
    v-enter-to (2.1.8)定义进入过渡的结束状态 #
    v-leave定义离开过渡的开始状态 #
    v-leave-active定义离开过渡生效时的状态 #
    v-leave-to (2.1.8)定义离开过渡的结束状态 #
    +

    如果你使用了 <transition name="my-tran">，那么 v-enter 会替换为 my-tran-enter。

    +

    自定义过渡的类名

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    :-:-
    enter-class#
    enter-active-class#
    enter-to-class (2.1.8+)#
    leave-class#
    leave-active-class#
    leave-to-class (2.1.8+)#
    +
    +
    <transition
+  name="custom-classes-transition"
+  enter-active-class="animated tada"
+  leave-active-class="animated bounceOutRight"
+>
+  <p v-if="show">hello</p>
+</transition>
+
    +

    显性的过渡持续时间

    +

    <transition> 组件上的 duration prop 定制一个显性的过渡持续时间 (以毫秒计)：

    +
    <transition :duration="1000">
+  ...
+</transition>
+
    +

    你也可以定制进入和移出的持续时间：

    +
    <transition :duration="{
+  enter: 500,
+  leave: 800
+}">
+  ...
+</transition>
+
    +

    初始渲染的过渡

    + +

    可以通过 appear attribute 设置节点在初始渲染的过渡

    +
    <transition appear>
+  <!-- ... -->
+</transition>
+
    +

    这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名

    +
    <transition
+  appear
+  appear-class="custom-appear-class"
+  appear-to-class="custom-appear-to-class"
+  appear-active-class="custom-appear-active-class"
+>
+  <!-- ... -->
+</transition>
+
    +

    自定义 JavaScript 钩子：

    +
    <transition
+  appear
+  v-on:before-appear="customBeforeAppearHook"
+  v-on:appear="customAppearHook"
+  v-on:after-appear="customAfterAppearHook"
+  v-on:appear-cancelled="customAppearCancelledHook"
+>
+  <!-- ... -->
+</transition>
+
    +

    无论是 appear attribute 还是 v-on:appear 钩子都会生成初始渲染过渡

    +

    JavaScript 钩子

    +
    <transition
+  v-on:before-enter="beforeEnter"
+  v-on:enter="enter"
+  v-on:after-enter="afterEnter"
+  v-on:enter-cancelled="enterCancelled"
+
+  v-on:before-leave="beforeLeave"
+  v-on:leave="leave"
+  v-on:after-leave="afterLeave"
+  v-on:leave-cancelled="leaveCancelled"
+>
+  <!-- ... -->
+</transition>
+
    +

    钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用

    +

    列表的进入/离开过渡

    + +
    <template>
+  <button v-on:click="add">添加</button>
+  <button v-on:click="remove">删除</button>
+  <transition-group name="list" tag="p">
+    <span v-for="item in items" v-bind:key="item" class="list-item">
+      {{ item }}
+    </span>
+  </transition-group>
+</template>
+<script>
+  export default {
+    data: function() {
+      return {
+        items: [1,2,3,4,5,6,7,8,9],
+        nextNum: 10
+      };
+    },
+    methods: {
+      randomIndex: function () {
+        return Math.floor(Math.random() * this.items.length)
+      },
+      add: function () {
+        this.items.splice(this.randomIndex(), 0, this.nextNum++)
+      },
+      remove: function () {
+        this.items.splice(this.randomIndex(), 1)
+      },
+    }
+  };
+</script>
+<style scoped>
+  .list-item {
+    display: inline-block;
+    margin-right: 10px;
+  }
+  .list-enter-active, .list-leave-active {
+    transition: all 1s;
+  }
+  /* .list-leave-active 适用于 2.1.8 以下版本 */
+  .list-enter, .list-leave-to {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+</style>
+

    Vue 2 API 参考

    全局配置

    diff --git a/style/style.css b/style/style.css index 3ac5da99..2d4bcc8f 100644 --- a/style/style.css +++ b/style/style.css @@ -653,7 +653,7 @@ body:not(.home) .h2wrap > h2 a::after { border-bottom: 0; } -.h3wrap hr { +.h3wrap hr, .h3wrap-body hr { border-bottom: 1px solid var(--color-border-default); }