学习笔记03--Vue动画

学习笔记03–Vue动画

一个动画过程：四个时间点和两个时间段
v-enter-active(v-enter-------->v-enter-to)进入过渡
v-leave-active(v-leave-------->v-leave-to)离开过渡

v-enter：是一个时间点，进入之前，元素的起始状态，此时还没有进入动画
v-leave-to：是一个时间点，动画离开之后的终止状态，此时动画已经结束了
v-enter-active 入场动画的时间段
v-leave-active 离场动画的时间段

1、使用过渡类名
例子需求：点击按钮，让 h3 显示，再点击，让 h3 隐藏
html结构：

<style>
  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateX(200px);
    }

  .v-enter-active,
  .v-leave-active {
    transition: all 0.5s ease;
    }
</style>

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- transition 元素，是 Vue 官方提供的，包裹需要被动画控制的元素 -->
    <transition>
      <h3 v-if="flag">这是一个H3</h3>
    </transition>
  </div>

vm实例：

var vm = new Vue({
  el: '#app',
  data: {
    isshow: false
  },
   methods: {}
 });

2、自定义v-前缀
给transition定义一个name，下面相当于将v-替换成my

<transition name="my">
   <h3 v-if="flag">这是一个h3</h3>
</transition>

3、钩子函数实现半场动画（有去无回）
小球半场运动的例子：
html结构：

 <transition
      @before-enter="beforeEnter"  //这几个函数也相当于动画的生命周期函数，更多详情可以参考官方vue文档
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
    </transition>

vm实例：

var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
       beforeEnter(el){ //动画入场前调用
          el.style.transform = "translate(0,0)" //设置小球初始位置
          },
       enter(el, done){  
          el.offsetWidth   //这句代码是保证动画有刷新,没有实际作用
          el.style.transform = "translate(150px, 400px)"
          el.style.transition = "all 0.8s ease"
          done()  //相当于调用afterEnter函数
         },
      afterEnter(el){ //动画完成之后调用
          this.flag = false
          }
        }
      });

注意：动画钩子函数的第一个参数el：表示要执行动画的dom元素，是一个原生js dom对象，即可以认为el是通过document.getElementById(’’)方式获取原生js dom对象的

4、多个元素实现动画
(1)使用transition-group元素实现列表动画
在实现列表过渡的时候，如果需要过渡的元素是通过v-for循环渲染出来的，则不能使用transition包裹，需要使用transition-group包裹
例：
html结构：

<style>
  .v-enter,
  .v-leave-to {
      opacity: 0;
      transform: translateY(100px);
    }
  .v-enter-active,
  .v-leave-active {
      transition: all 0.6s ease;
    }
</style>

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

vm实例：

var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          {id: 1, name: '张三'},
          {id: 2, name: '李四'},
          {id: 3, name: '王五'}
        ]
      },
 methods: {
        add() {
          this.list.push({id: this.id, name: this.name})
          this.id = this.name = ''
        },
        del(i) {
          this.list.splice(i, 1)
        }
    }
 })

**注意：**如果要为v-for循环渲染出来的元素设置动画，需要给每个元素加:key属性

(2)实现列表删除和删除动画(v-move 和v-leave-active结合使用，能够实现列表中被删除元素后面的元素渐渐向上的效果)

<style>
.v-move {
   transition: all 0.5s ease;
}
.v-leave-active {
   position: absolute;
}
</style>

(3)给transition-group添加appear属性，实现页面入场效果

通过为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为ul元素，如果不指定 tag 属性，默认渲染为 span 标签

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

来源：CSDN

作者：Moustache*

链接：https://blog.csdn.net/qq_43173415/article/details/102400079

标签

transition

动画