vue动画总结

Css动画 实现三角旋转

vue动画其实也就是对css动画的封装。

一般来说，css过渡不会直接用js来操控css属性。我们可以给这个div添加一个固定的过渡类， transitionClass，在该类中定义过渡相关内容，然后再通过添加不同的类实现效果。

实现三角倒转效果:只需要定义一个is-rotation的类名，该类里进行旋转或者移动定位等，然后根据需要动态添加类名即可。

select__content就是过渡类

再通过不同的类名实现过渡效果

Vue动画

前提：必须是v-if、v-show、组件初始化、或动态组件的情况下使用。

分为两个阶段，一是从false-->true创建的过程，一个是从true-->false隐藏的过程。

注意：想要过渡有收起效果，必须定义好容器的高度。不能由内容撑开。而且容器内部只能有一个标签。如果需要过渡列表，使用transition-group。

 <transition name="fade">
       <span v-if="isDrag" class="trangle"></span>
 </transition>

• vue2版本

当false-->true 组件或标签创建时

//起点
.fade-enter{
   transform:translate(-100px)
}
//终点
.fade-enter-to{
	transform:translate(0)
}
//定义整个过程
.fade-enter-active {
     transition: all 1s;
}

当true-->false组件销毁时

//离开时的起点
.fade-leave{
   transform:translate(0px)
}
//离开终点，且最后元素会消失
.fade-leave-to{
	transform:translate(-100px)
}
//定义整个过程
.fade-leave-active {
     transition: all 1s;
}

可以发现，进入的终点就是消失的起点，所以可以将其写法合并

enter-to,leave-from 一般是不写，它只有一帧，默认和box样式一致即可 。因此，我们只需要它自有类里写好终点样式并添加过渡。然后定义enter,leave-to即可

• vue3版本

  fade-enter-from

  fade-enter-to