黑马学习记录--Vue-动画

浅浅的花香味﹌ 2022-03-17 04:24 254阅读 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);
        }

## 过渡类名实现动画 ##

<!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>
        /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
        /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
        .v-enter,
        .v-leave-to {
          opacity: 0;
          transform: translateX(150px);
        }
    
        /* v-enter-active 【入场动画的时间段】 */
        /* v-leave-active 【离场动画的时间段】 */
        .v-enter-active,
        .v-leave-active{
          transition: all 0.8s ease;
        }
    
    
    
    
        .my-enter,
        .my-leave-to {
          opacity: 0;
          transform: translateY(70px);
        }
    
        .my-enter-active,
        .my-leave-active{
          transition: all 0.8s ease;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        
        
        
        <transition>
          <h3 v-if="flag">这是一个H3</h3>
        </transition>
    
    
        <hr>
    
        <input type="button" value="toggle2" @click="flag2=!flag2">
        <transition name="my">
          <h6 v-if="flag2">这是一个H6</h6>
        </transition>
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            flag: false,
            flag2: false
          },
          methods: {}
        });
      </script>
    </body>
    
    </html>

### [使用第三方 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;
            }
          }

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

<!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>

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

.show{
          transition: all 0.4s ease;
        }

### [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>

[Vue]: https://cn.vuejs.org/v2/guide/transitions.html
[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