vue中显示和隐藏如何做动画_vue实现动画和css3动画属性

通过css代码，实现具体的动画效果，本案例实现的是对盒子进行放大的动画。

用animation做动画时，把效果给-enter-active   -leave-active

或name>-enter-to-leave-to都可以

四、css3

CSS3属性中有关于制作动画的三个属性： Transition(过渡),Transform(转换),Animation(动画)

1、transtion:

transition-property 需要过渡的样式 (all || [attr] || none)默认是 all

transition-duration 运动时间 默认是 0 s

transition-delay 延迟时间 默认是 0

transition: (过渡样式、运动时间、延迟时间)

transition-timing-function 运动形式 默认是 ease

ease：(慢速开始，然后变快，然后慢速结束) linear：(匀速) ease-in：(加速)

ease-out：(减速)

ease-in-out：(先加速后减速)

cubic-bezier 贝塞尔曲线( x1, y1, x2, y2 )

steps 实现一个关键逐帧动画画的功能

2、animation: 定义动画之前先定义关键帧keyframes

animation和transition的区别？

相同点：都是随着时间改变元素的属性值。

不同点：

transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；

而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。

3、transform：

向元素应用2D或3D转换。对元素进行旋转、缩放、移动或倾斜

1、translate ()根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。类似于定位中的left值(X轴)、top值(Y轴)

使用translate()函数，你可以把元素从原来的位置移动，而不影响在X、Y轴上任何组件。

translate (0,500px)

2、rotate() 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。rotate(360deg )

3、 scale()该元素增加或减少的大小，取决于宽度(X轴)和高度(Y轴)的参数：

缩放scale()函数让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。

常用的transform的属性就是这些。