vue动画笔记

た入场券 2023-07-25 14:03 4阅读 0赞

vue动画笔记

[学习地址 https://cn.vuejs.org/v2/guide/transitions.html][https_cn.vuejs.org_v2_guide_transitions.html]

### 简介 ###

vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果，包括以下工具：

*  在css过渡和动画中自动应用class
 *  可以配合使用第三方CSS动画库，如Animate.css
 *  在过渡钩子函数中使用JavaScript直接操作DOM
 *  可以配合使用第三方JavaScript动画库，如Velocity.js

<transition name="fade">
        <p v-if="show">hello</p>
      </transition>

.fade-enter-active, .fade-leave-active { 
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { 
      opacity: 0;
    }

### 过渡的类名 ###

1.  ·`v-enter`： 定义`进入过渡的开始`状态。在元素被插入之前生效，在元素被插入之后的夏一珍移除。
2.  `v-enter-active`：定义`进入过渡生效时`的状态。
3.  `v-enter-to`：定义`进入过渡的结束`状态。（ 2.1.8 版及以上 ）
4.  `v-leave`： 定义`离开过渡的开始`状态。
5.  `v-leave-active`： 定义`离开过渡生效时`的状态。
6.  `v-leave-to`： 定义`离开过渡的结束`状态。 （ 2.1.8 版及以上 ）

如果使用的是没有名字的 `<transition>`,则 `v-` 是这些类名的默认前缀。如果使用了 `<transition name="my-transition">`，那么 `v-enter`会替换为 `my-transition-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>

### JavaScript钩子 ###

methods: { 
        beforeEnter: function (el) { },
        enter: function(el, done) { done()}, //当与 CSS 结合使用时,回调函数done是可选的
        afterEnter: function (el) { },
        enterCancelled: function (el) { },
    	beforeLeave: function (el) { },
    	leave: function (el, done) { done()},//当与 CSS 结合使用时,回调函数done是可选的
    	afterLeave: function (el) { },
    	leaveCancelled: function (el) { } //leaveCancelled只用于 v-show中
    }

*  当只用JavaScript过渡的时候，在enter和leave中必须使用done进行回调。否则它们将被同步调用，过渡会立即完成。
 *  推荐对于仅使用 JavaScript 过渡的元素添加 `v-bind:css="false"`，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

### 初始渲染的过渡 ###

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

### 多个元素的过渡 ###

*  对于原生标签可以使用 `v-if`/`v-else` ，需要 给在 `transition` 组件中的多个元素设置 key 作为区分

[https_cn.vuejs.org_v2_guide_transitions.html]: https://cn.vuejs.org/v2/guide/transitions.html