VUE-动画

transition

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

      
        
这是一个标题
      

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

动画也有动画的钩子函数

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

    // 表示动画入场之前，此时动画尚未开始，可以在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包裹，需要使用标签，如果要为v-for循环的元素设置动画，必须要为每一个元素设置：key属性，不然会报错。

        
        
        
        
          
          
          
            

              {{item.id}}-------{{item.name}}
            
          
         
        

.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：当前元素先进行过渡，完成之后新元素过渡进入