VUE-动画

transition

1． 使用<transiton>标签把要执行动画的DOM元素包裹起来，可以使用name属性给这个动画增加自定义名称

      <transition name="my">
        <h1 v-if="show">这是一个标题</h1>
      </transition>

2． 给动画添加进场和入场动画

.my-enter-active {
  transition: all .9s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.my-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.my-enter, .my-leave-to
{
  transform: translateX(10px);
  opacity: 0;
}

image.png

动画也有动画的钩子函数

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

一个栗子
加入购物车的动画效果

        <transition name="ball"
          v-on:before-enter="beforeEnter"
          v-on:enter="enter"
          v-on:after-enter="afterEnter">
          <div v-show="flag" style="height:20px;width:20px;border-radius:50%;background-color:red"></div>
        </transition>

    // 表示动画入场之前，此时动画尚未开始，可以在beforeEnter中设置开始动画之前的起始样式
    beforeEnter(el) {
      el.style.transform = "translate(0,0)";
    },
    // 表示动画开始之后的样式，结束状态
    enter(el, done) {
      el.offsetWidth;
      el.style.transform = "translate(260px,260px)";
      el.style.transition = "all 1s ease";
      done();
      // 在enter和leave方法中，回调函数done是必须的，
    },
    afterEnter(el) {
      this.flag = !this.flag;
    }

transitionGroup

在实现列表过渡的时候，如果需要过渡的元素是通过v-for循环渲染出来的，不能使用transition包裹，需要使用<transitionGroup>标签，如果要为v-for循环的元素设置动画，必须要为每一个元素设置：key属性，不然会报错。

        <input type="text" placeholder="请输入id" v-model="id">
        <input type="text" placeholder="请输入人名" v-model="name">
        <input type="submit" value="提交" @click="submit">
        <!-- <ul> -->
          <!-- 给transition-group添加appear属性，实现页面刚展示出来的时候入场的效果 -->
          <!-- 通过为transition-group设置tag属性，指定transition-group渲染为指定的元素，
               如果不指定tag属性，默认渲染为span标签 -->
          <transition-group appear tag="ul">
            <li v-for="(item ,index) in list" :key="index"  @click="del(index)">
              {{item.id}}-------{{item.name}}
            </li>
          </transition-group>
         
        <!-- </ul> -->

.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateY(80px);
}

.v-enter-active,
.v-leave-active{
  transition: all 1s ease;  
}

/* .v-move {
  transition: all 1s ease;
}

.v-leave-active {
  position: absolute
} */

    submit(){
      let per = {
        id:this.id,
        name:this.name
      };
      this.list.push(per);
    },
    del(e){
      this.list.splice(e,1);
    }

mode属性

多个元素同时生效的进入和离开过渡模式

in-out：新元素先进行过渡，完成之后当前元素过渡离开

out-in：当前元素先进行过渡，完成之后新元素过渡进入