微信扫一扫打赏支持

VUE课程---19、动画

VUE课程---19、动画

一、总结

一句话总结：

vue动画有进入和出去两个大状态，设置动画的话用transition原生包裹起来，transition的name属性指定动画的名称
<style>
  .xxx-enter-active, .xxx-leave-active{
      transition: all .3s ease;
  }
  .xxx-enter,.xxx-leave-to{
      opacity: 0;
      font-size: 10px;
  }
</style>
<div id="app">
    <transition name="xxx">
        <p v-show="isShow">{{msg}}</p>
    </transition>
    <button @click="isShow=!isShow">切换</button>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            //isShow是true，默认元素是显示状态，下一个状态是离开状态，所以对应的就是v-leave状态
            isShow:true,
            msg: '我有一只小毛驴，我永远也不骑'
        }
    });
</script>

 

 

1、如何理解vue动画的进入和出去两个大状态？

vue动画有进入和出去两个大状态，可以简单的通过元素的显示和隐藏来理解，比如点击一下toggle按钮让元素显示可以看做元素的进入状态，再点一下toggle按钮让元素隐藏可以看做元素的离开状态

 

 

2、为什么要有动画？

动画能够提高用户的体验，帮助用户更好的理解页面中的功能

 

 

3、vue动画的进去和离开状态？

进入状态有（v-enter（进入初始状态）、v-enter-to（进入后状态）、v-enter-active（进入的整个状态））
离开状态有（v-leave（离开初始状态）、v-leave-to（离开后状态）、v-leave-active（离开的整个状态））

 

 

4、v-enter为什么一般和v-leave-to一起设置，v-enter-to为什么一般和v-leave一起设置？

v-enter表示进入初始状态，v-leave-to表示离开后状态，一般离开后的状态就是进入的初始状态
v-enter-to表示进入后状态，v-leave表示离开初始状态，一般进入后状态就是离开的初始状态

 

 

5、vue设置动画实例？

要设置动画的元素用transition原生包裹起来，transition的name属性指定动画的名称
<style>
  .xxx-enter-active, .xxx-leave-active{
      transition: all .3s ease;
  }
  .xxx-enter,.xxx-leave-to{
      opacity: 0;
      font-size: 10px;
  }
</style>
<div id="app">
    <transition name="xxx">
        <p v-show="isShow">{{msg}}</p>
    </transition>
    <button @click="isShow=!isShow">切换</button>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            //isShow是true，默认元素是显示状态，下一个状态是离开状态，所以对应的就是v-leave状态
            isShow:true,
            msg: '我有一只小毛驴，我永远也不骑'
        }
    });
</script>

 

 

 

6、当元素默认显示的时候（也就是isShow是true的时候），对应的状态是什么？

isShow是true，默认元素是显示状态，下一个状态是离开状态，所以对应的就是v-leave状态

 

 

 

 

二、动画

博客对应课程的视频位置：

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>1、动画</title>
 6     <style>
 7         .xxx-enter-active, .xxx-leave-active{
 8             transition: all .3s ease;
 9         }
10         .xxx-enter,.xxx-leave-to{
11             opacity: 0;
12             font-size: 10px;
13         }
14     </style>
15 </head>
16 <body>
17 <!--
18 
19 vue的动画一般说的是toggle的两个状态，所以
20 
21 进入的状态：toggle第一下
22 v-enter -> v-enter-to
23 出去的状态：toggle第二下
24 v-leave -> v-leave-to
25 
26 所以一般 v-enter-to 和 v-leave 是一样的
27 v-enter 和 v-leave-to 一般是一样的
28 
29 v-enter-active：进入的整个状态
30 v-leave-active：出去的整个状态
31 
32 -->
33 <div id="app">
34     <transition name="xxx">
35         <p v-show="isShow">{{msg}}</p>
36     </transition>
37     <button @click="isShow=!isShow">切换</button>
38 </div>
39 <script src="../js/vue.js"></script>
40 <script>
41     let vm = new Vue({
42         el: '#app',
43         data: {
44             //isShow是true，默认元素是显示状态，下一个状态是离开状态，所以对应的就是v-leave状态
45             isShow:true,
46             msg: '我有一只小毛驴，我永远也不骑'
47         }
48     });
49 </script>
50 </body>
51 </html>

 

 

 

 

 
posted @ 2020-04-21 11:37  范仁义  阅读(214)  评论(0)  编辑  收藏  举报