Vue.js中的动画

蔚落 2022-03-17 12:34 216阅读 0赞

## [Vue中的动画][Vue] ##

为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能；

### 使用过渡类名 ###

1.  HTML结构：

1.  VM 实例：

// 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        isshow: false
      },
      methods: {
        myAnimate() {
          this.isshow = !this.isshow;
        }
      }
    });

1.  定义两组类样式：

/* 定义进入和离开时候的过渡状态 */
        .fade-enter-active,
        .fade-leave-active {
          transition: all 0.2s ease;
          position: absolute;
        }
    
        /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
        .fade-enter,
        .fade-leave-to {
          opacity: 0;
          transform: translateX(100px);
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]

代码：

### 修改v-前缀 ###

使用transition name="my"来替换v-前缀

### [使用第三方 CSS 动画库][CSS] ###

1.  导入动画类库：

1.  定义 transition 及属性：

### 使用动画钩子函数 ###

1.  定义 transition 组件以及三个钩子函数：

1.  定义三个 methods 钩子方法：

methods: {
            beforeEnter(el) { // 动画进入之前的回调
              el.style.transform = 'translateX(500px)';
            },
            enter(el, done) { // 动画进入完成时候的回调
              el.offsetWidth;
              el.style.transform = 'translateX(0px)';
              done();
            },
            afterEnter(el) { // 动画进入完成之后的回调
              this.isshow = !this.isshow;
            }
          }

1.  定义动画过渡时长和样式：

.show{
          transition: all 0.4s ease;
        }

#### 使用钩子函数模拟小球半场动画 ####

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <style>
        .ball {
          width: 15px;
          height: 15px;
          border-radius: 50%;
          background-color: red;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        <input type="button" value="快到碗里来" @click="flag=!flag">
        
        <transition
          @before-enter="beforeEnter"
          @enter="enter"
          @after-enter="afterEnter">
          <div class="ball" v-show="flag"></div>
        </transition>
      </div>
    
      <script>
    
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            flag: false
          },
          methods: {
            // 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
            // 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
            beforeEnter(el){
              // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
              // 设置小球开始动画之前的，起始位置
              el.style.transform = "translate(0, 0)"
            },
            enter(el, done){
              // 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
              // 可以认为 el.offsetWidth 会强制动画刷新
              el.offsetWidth
              // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
              el.style.transform = "translate(150px, 450px)"
              el.style.transition = 'all 1s ease'
    
              // 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
              done()
            },
            afterEnter(el){
              // 动画完成之后，会调用 afterEnter
              // console.log('ok')
              this.flag = !this.flag
            }
          }
        });
      </script>
    </body>
    
    </html>

### [v-for 的列表过渡][v-for] ###

1.  定义过渡样式：

1.  定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：

1.  定义 VM中的结构：

// 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            txt: '',
            list: [1, 2, 3, 4]
          },
          methods: {
            add() {
              this.list.push(this.txt);
              this.txt = '';
            }
          }
        });

### 列表的排序过渡 ###

`<transition-group>` 组件还有一个特殊之处。不仅可以进入和离开动画，**还可以改变定位**。要使用这个新功能只需了解新增的 `v-move` 特性，**它会在元素的改变定位的过程中应用**。

*  `v-move` 和 `v-leave-active` 结合使用，能够让列表的过渡更加平缓柔和：

.v-move{
      transition: all 0.8s ease;
    }
    .v-leave-active{
      position: absolute;
    }

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <style>
        li {
          border: 1px dashed #999;
          margin: 5px;
          line-height: 35px;
          padding-left: 5px;
          font-size: 12px;
          width: 100%;
        }
    
        li:hover {
          background-color: hotpink;
          transition: all 0.8s ease;
        }
    
    
    
        .v-enter,
        .v-leave-to {
          opacity: 0;
          transform: translateY(80px);
        }
    
        .v-enter-active,
        .v-leave-active {
          transition: all 0.6s ease;
        }
    
        /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
        .v-move {
          transition: all 0.6s ease;
        }
        .v-leave-active{
          position: absolute;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
    
        <div>
          <label>
            Id:
            <input type="text" v-model="id">
          </label>
    
          <label>
            Name:
            <input type="text" v-model="name">
          </label>
    
          <input type="button" value="添加" @click="add">
        </div>
    
        
          
          
          
          
          <transition-group appear tag="ul">
            <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
              {
       {item.id}} --- {
       {item.name}}
            </li>
          </transition-group>
        
    
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            id: '',
            name: '',
            list: [
              { id: 1, name: '赵高' },
              { id: 2, name: '秦桧' },
              { id: 3, name: '严嵩' },
              { id: 4, name: '魏忠贤' }
            ]
          },
          methods: {
            add() {
              this.list.push({ id: this.id, name: this.name })
              this.id = this.name = ''
            },
            del(i) {
              this.list.splice(i, 1)
            }
          }
        });
      </script>
    </body>
    
    </html>

## 小球动画 ##

实现小球抛物线然后消失。

使用flag来控制小球隐藏

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <style>
        .ball {
          width: 15px;
          height: 15px;
          background-color: red;
          border-radius: 50%;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        <input type="button" value="加入购物车" @click="flag=!flag">
    
        <transition
          @before-enter="beforeEnter"
          @enter="enter"
          @after-enter="afterEnter"
          @enter-cancelled="enterCancelled"
    
          @before-leave="beforeLeave"
          @leave="leave"
          @after-leave="afterLeave"
          @leave-cancelled="leaveCancelled">
          <div class="ball" v-show="flag"></div>
        </transition>
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            flag: false
          },
          methods: {
            beforeEnter(el){
              el.style.transform = 'translate(0, 0)'
              console.log("before:" + this.flag)
            },
            enter(el,done){
              el.offsetWidth
    
              el.style.transform = 'translate(150px, 450px)'
              el.style.transition = 'all 1s ease'
              console.log("enter:" + this.flag)
              done()
            },
            afterEnter(el){
              // 这句话， 第一个功能，是控制小球的显示与隐藏
              // 第二个功能： 直接跳过后半场动画，让 flag 标识符 直接变为 false
              // 当第二次再点击 按钮的时候， flag  false  ->    true
              this.flag = !this.flag
              console.log("afterEnter:" + this.flag)
               //el.style.opacity = 0.5
              // Vue 把一个完整的动画，使用钩子函数，拆分为了两部分：
              // 我们使用 flag 标识符，来表示动画的切换；
              // 刚以开始，flag = false  ->   true   ->   false
            },
    
            enterCancelled: function (el) {
              // ...
              console.log("enterCancelled:" + this.flag)
            },
    
            // --------
            // 离开时
            // --------
    
            beforeLeave: function (el) {
              // ...
              console.log("beforeLeave:" + this.flag)
            },
            // 当与 CSS 结合使用时
            // 回调函数 done 是可选的
            leave: function (el) {
              // ...
              console.log("leave:" + this.flag)
            },
            afterLeave: function (el) {
              // ...
              console.log("afterLeave:" + this.flag)
            },
            // leaveCancelled 只用于 v-show 中
            leaveCancelled: function (el) {
              // ...
              console.log("leaveCancelled:" + this.flag)
            }
          }
        });
      </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 1]  
使用el.style.opacit来控制小球隐藏，但是这种方法不行：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <style>
        .ball {
          width: 15px;
          height: 15px;
          background-color: red;
          border-radius: 50%;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        <input type="button" value="加入购物车" @click="flag=!flag">
    
        <transition
          @before-enter="beforeEnter"
          @enter="enter"
          @after-enter="afterEnter"
          @enter-cancelled="enterCancelled"
    
          @before-leave="beforeLeave"
          @leave="leave"
          @after-leave="afterLeave"
          @leave-cancelled="leaveCancelled">
          <div class="ball" v-show="flag"></div>
        </transition>
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            flag: false
          },
          methods: {
            beforeEnter(el){
              el.style.transform = 'translate(0, 0)'
              console.log("before:" + this.flag)
            },
            enter(el,done){
              el.offsetWidth
    
              el.style.transform = 'translate(150px, 450px)'
              el.style.transition = 'all 1s ease'
              console.log("enter:" + this.flag)
              done()
            },
            afterEnter(el){
              // 这句话， 第一个功能，是控制小球的显示与隐藏
              // 第二个功能： 直接跳过后半场动画，让 flag 标识符 直接变为 false
              // 当第二次再点击 按钮的时候， flag  false  ->    true
              //this.flag = !this.flag
              console.log("afterEnter:" + this.flag)
               el.style.opacity = 0.5
              // Vue 把一个完整的动画，使用钩子函数，拆分为了两部分：
              // 我们使用 flag 标识符，来表示动画的切换；
              // 刚以开始，flag = false  ->   true   ->   false
            },
    
            enterCancelled: function (el) {
              // ...
              console.log("enterCancelled:" + this.flag)
            },
    
            // --------
            // 离开时
            // --------
    
            beforeLeave: function (el) {
              // ...
              console.log("beforeLeave:" + this.flag)
            },
            // 当与 CSS 结合使用时
            // 回调函数 done 是可选的
            leave: function (el) {
              // ...
              console.log("leave:" + this.flag)
            },
            afterLeave: function (el) {
              // ...
              console.log("afterLeave:" + this.flag)
            },
            // leaveCancelled 只用于 v-show 中
            leaveCancelled: function (el) {
              // ...
              console.log("leaveCancelled:" + this.flag)
            }
          }
        });
      </script>
    </body>
    
    </html>

第一次点击的时候：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 2]  
第二次点击：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 3]  
所以 `this.flag = !this.flag` 这句话， 第一个功能，是控制小球的显示与隐藏。第二个功能： 直接跳过后半场动画，让 flag 标识符 直接变为 false

[源代码地址][Link 1]

[Vue]: https://cn.vuejs.org/v2/guide/transitions.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]: /images/20220317/395f5664dafa4fdbbf14dbdfeaa1ef64.png
[CSS]: https://cn.vuejs.org/v2/guide/transitions.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1%E7%B1%BB%E5%90%8D
[v-for]: https://cn.vuejs.org/v2/guide/transitions.html#%E5%88%97%E8%A1%A8%E7%9A%84%E8%BF%9B%E5%85%A5%E5%92%8C%E7%A6%BB%E5%BC%80%E8%BF%87%E6%B8%A1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 1]: /images/20220317/0398f3f569094a3593e978e41436a012.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 2]: /images/20220317/101bb9421a534e20959d4120745548b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 3]: /images/20220317/7f5a54adc9df44e68bdf645ef63ec2b2.png
[Link 1]: https://gitee.com/cckevincyh/VueDemo/tree/master/day03