vue的过渡与动画

过渡

vue 提供了 transition 的封装组件

所有的关于过渡的动画效果都是通过transition组件进行设置的

几种能够过滤的场景

  • 条件渲染 (使用 v-if)
  • 条件展示 (使用 v-show)
  • 动态组件
  • 组件根节点

基本使用

 1 <template>
 2   <div>
 3   <button @click="toggle">按我切换显示和隐藏</button>
 4    <transition>
 5       <p v-if="isShow">123456789</p>
 6    </transition>
 7   </div>
 8 </template>
 9 
10 <script>
11   export default {
12     data(){
13       return {
14         isShow:true
15       }
16     },
17     methods:{
18       toggle(){
19         this.isShow=!this.isShow
20       }
21     }
22   }
23 </script>
24 
25 <style scoped>
26 p{
27   width: 200px;
28   height: 200px;
29   background: red;
30 }
31 .v-enter-active, .v-leave-active {
32   transition: opacity .5s;
33 }
34 .v-enter, .v-leave-to  {
35   opacity: 0;
36 }
37 </style>

transition组件内部嵌套一个p标签，这个标签通过设置css样式进行过渡显示

上面的属性不是自定义的，而是vue提供给我们设置transition组件用的

 

 

 

 

 

Vue 的transition组件实现过渡的机理

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

  1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。

  2. 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。

  3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

  1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

  2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

  3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

  4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

  5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

  6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

 

 

 

 

如果transition组件中有name属性，name设置对应的css属性的时候就要将v-替换为设置的对应属性加-

比如我们设置了一个fade的name属性

 

1    <transition name="fade">
2       <p v-if="isShow">123456789</p>
3    </transition>

我们要设置的css属性前缀从.v-通通都变为.fade-

1 .fade-enter-active, .fade-leave-active {
2   transition: opacity .5s;
3 }
4 .fade-enter, .fade-leave-to  {
5   opacity: 0;
6 }

我们可以利用过渡实现动画效果

 1 <template>
 2   <div>
 3   <button @click="toggle">按我切换显示和隐藏</button>
 4    <transition name="slide-fade">
 5       <p v-if="isShow">123456789</p>
 6    </transition>
 7   </div>
 8 </template>
 9 
10 <script>
11   export default {
12     data(){
13       return {
14         isShow:true
15       }
16     },
17     methods:{
18       toggle(){
19         this.isShow=!this.isShow
20       }
21     }
22   }
23 </script>
24 
25 <style scoped>
26 p{
27   width: 200px;
28   height: 200px;
29   background: red;
30 }
31 .slide-fade-enter-active {
32   transition: all .3s ease;
33 }
34 .slide-fade-leave-active {
35   transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
36 }
37 .slide-fade-enter, .slide-fade-leave-to
38 /* .slide-fade-leave-active for below version 2.1.8 */ {
39   transform: translateX(10px);
40   opacity: 0;
41 }
42 </style>

 

 

 

 

 动画

 CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

动画的基本使用

 1 <template>
 2   <div>
 3   <button @click="toggle">按我切换显示和隐藏</button>
 4    <transition name="bounce">
 5       <p v-if="isShow">123456789</p>
 6    </transition>
 7   </div>
 8 </template>
 9 
10 <script>
11   export default {
12     data(){
13       return {
14         isShow:true
15       }
16     },
17     methods:{
18       toggle(){
19         this.isShow=!this.isShow
20       }
21     }
22   }
23 </script>
24 
25 <style scoped>
26 p{
27   width: 200px;
28   height: 200px;
29   background: red;
30 }
31 .bounce-enter-active {
32   animation: bounce-in .5s;
33 }
34 .bounce-leave-active {
35   animation: bounce-in .5s reverse;
36 }
37 @keyframes bounce-in {
38   0% {
39     transform: scale(0);
40   }
41   50% {
42     transform: scale(1.5);
43   }
44   100% {
45     transform: scale(1);
46   }
47 }
48 </style>

 

 

 

自定义过渡的类名

我们使用Vue的动画，更多的是使用class类名形式然后引入第三方库辅助开发

我们可以通过以下 attribute 来自定义过渡类名：

  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+)

 

每个class类名的含义和上面我们学习过渡时候的属性含义相同，区别是vue的动画是通过类名的形式进行添加

 

我们使用animate第三方库辅助开发

https://www.dowebok.com/demo/2014/98/ 地址是animate.css的动画效果

 

我们需要再对应的组件中引入对应的css库

 1 <template>
 2   <div>
 3   <button @click="toggle">按我切换显示和隐藏</button>
 4    <transition   name="custom-classes-transition"
 5     enter-active-class="animated tada"
 6     leave-active-class="animated bounceOutRight">
 7       <p v-if="isShow">123456789</p>
 8    </transition>
 9   </div>
10 </template>
11 
12 <script>
13   export default {
14     data(){
15       return {
16         isShow:true
17       }
18     },
19     methods:{
20       toggle(){
21         this.isShow=!this.isShow
22       }
23     }
24   }
25 </script>
26 
27 <style scoped>
28 @import "./style/anmiate.css";
29 p{
30   width: 200px;
31   height: 200px;
32   background: red;
33 }
34 
35 </style>

 

在类名属性中添加对应的类名，第一个animated属性，就是代码让该元素/组件具有动画状态，第二个属性就是运动的状态

 

 

 

同时使用过渡和动画

Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。

但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

如果同时设置了过渡和动画，此时可以设置type属性进行区分监听

type 为transition则代表监听过渡的

type为 animation则代表监听动画的

 

定制进入和移出的持续时间

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

 1 <template>
 2   <div>
 3   <button @click="toggle">按我切换显示和隐藏</button>
 4    <transition duration="{ enter: 1500, leave: 1800 }">
 5       <p v-if="isShow">123456789</p>
 6    </transition>
 7   </div>
 8 </template>
 9 
10 <script>
11   export default {
12     data(){
13       return {
14         isShow:true
15       }
16     },
17     methods:{
18       toggle(){
19         this.isShow=!this.isShow
20       }
21     }
22   }
23 </script>
24 
25 <style scoped>
26 @import "./style/anmiate.css";
27 p{
28   width: 200px;
29   height: 200px;
30   background: red;
31 }
32 .v-enter-active {
33     transition: all .3s ease;
34 }
35 
36 .v-leave-active {
37     transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
38 }
39 
40 .v-enter,
41 .v-leave-to {
42     transform: translateX(10px);
43     opacity: 0;
44 }
45 
46 </style>

 

 

JavaScript 钩子

可以在 attribute 中声明 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>

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

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

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

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

 

在使用函数钩子设置动画或者过渡的时候当只用 ，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

el是设置的节点名称，done当前函数的回调

 

posted @ 2021-09-18 11:32  keyeking  阅读(433)  评论(0)  编辑  收藏  举报