vue实现动画和css3动画属性

1、vue动画实现原理：

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

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

　　

　　 实现动画有不少方式，例如：

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

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

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

　　咱们今天不说利用第三方动画库，本身手动利用css3 实现简单动画功能

2、动画的类名

　　动画的类名分为6个

　　入场动画

　　　　<name>-enter      　　　　入场前

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

　　　　<name>-enter-to　　　　入场后

　　出场动画

　　　　 <name>-leave　　　　　　出场前

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

　　　　<name>-leave-to　　　　  出场后

3、demo

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

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

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

　　或name>-enter-to<name>-leave-to均可以

4、css3　

CSS3属性中有关于制做动画的三个属性： Transition（过渡）,Transform（转换）,Animation（动画）
　　一、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 实现一个关键逐帧动画画的功能
　　二、animation: 定义动画以前先定义关键帧keyframes

　　

　　animation和transition的区别？
　　相同点：都是随着时间改变元素的属性值。
　　不一样点：
　　　　transition须要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；
　　　　而animation在不须要触发任何事件的状况下也能够显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。

　　三、transform：

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

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

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

       　　　　 translate (0,500px)

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

　　　　三、 scale()该元素增长或减小的大小，取决于宽度（X轴）和高度（Y轴）的参数：

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

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