vue实现动画和css3动画属性

一、vue动画实现原理：

　　动画的实现，必须通过元素的显示隐藏或销毁创建。v-show  v-if

　　vue中如果需要使用动画的时候，需要使用一个内置组件transition组件 该组件有一个name属性 值为动画的类名（类名随意起）

　　

　　实现动画有很多方式，例如：

　　　　可以配合使用第三方 CSS 动画库，如 Animate.css

　　　　 在过渡钩子函数中使用 JavaScript 直接操作 DOM

　　　　 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

　　我们今天不说利用第三方动画库，自己手动利用css3 实现简单动画功能

二、动画的类名

　　动画的类名分为6个

　　入场动画

　　　　<name>-enter      　　　　入场前

　　　　<name>-enter-active　　  入场持续的过程

　　　　<name>-enter-to　　　　入场后

　　出场动画

　　　　<name>-leave　　　　　　出场前

　　　　<name>-leave-active　　　出场持续的过程

　　　　<name>-leave-to　　　　  出场后

三、demo

　　html和技术部分代码：通过点击按钮让盒子进行显示隐藏（v-if和v-show都可以）

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

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

　　或name>-enter-to<name>-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的属性就是这些。