title: css动画和transition过渡
toc: true
date: 2017-03-20
- vue组件
- 技术分享
分享css动画和transition过渡的一些个人理解。
css动画
确定元素样式
查看并确定被加动画的元素原有样式，以便在制作动画时有样式参照。
定义动画名称
实例代码：
@keyframes actionfirst {
from {top: -30px;opacity: 0;}
to {top: 0;opacity: 1;}
}
@keyframes actiontwo {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
25% {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
50% {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
说明：
-
@keyframes为css创建动画的规则； -
actionfirst和actiontwo为自己要定义的动画名称； - 如果动画只有一次变化，则用
from{动画开始时的样式状态}to{动画结束时的样式状态}的方式，大括号里可以写多种样式，它们在动画进行时是同时变化的，只从开始状态到结束状态变化一次； - 如果动画需要多次变化，则用百分数的方式从
0%{动画开始时的样式状态}到100%{动画结束时的样式状态}，这之间可以随意划分，如25%{动画进行到此时的样式状态}。
定义动画的样式名
实例代码：
.fade {
animation: actionfirst linear 0.5s;
-webkit-animation: actionfirst linear 0.5s;
}
说明：
-
.fade为自己定义的样式名或者样式选择器； -
animation为css设置动画属性的一种简写属性，可分为6个动画属性：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction -
actionfirst为需要绑定到此样式或此选择器的 keyframe 名称，即第二步定义的动画名称； -
linear为动画速度曲线； -
0.5s为完成动画所花费的时间，用秒或毫秒为单位
动画属性表：
<table class="table" style="max-width:75em"><thead><tr><th>值</th><th>描述</th></tr></thead><tbody><tr><td width="35%">animation-name</td><td>规定需要绑定到选择器的 keyframe 名称。</td></tr><tr><td>animation-duration</td><td>规定完成动画所花费的时间，以秒或毫秒计。</td></tr><tr><td>animation-timing-function</td><td>规定动画的速度曲线。</td></tr><tr><td>animation-delay</td><td>规定在动画开始之前的延迟。</td></tr><tr><td>animation-iteration-count</td><td>规定动画应该播放的次数。</td></tr><tr><td>animation-direction</td><td>规定是否应该轮流反向播放动画。</td></tr></tbody></table>
动画速率曲线表：
<table class="table" style="max-width:75em"><thead><tr><th>值</th><th>描述</th></tr></thead><tbody><tr><td width="35%">linear</td><td>动画从头到尾的速度是相同的。</td></tr><tr><td>ease</td><td>默认。动画以低速开始，然后加快，在结束前变慢。</td></tr><tr><td>ease-in</td><td>动画以低速开始。</td></tr><tr><td>ease-out</td><td>动画以低速结束。</td></tr><tr><td>ease-in-out</td><td>动画以低速开始和结束。</td></tr><tr><td>cubic-bezier(n,n,n,n)</td><td>在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。</td></tr></tbody></table>
transition过渡
这里分享一些我的个人理解，vue.js官方网站上对“过渡效果”和“过渡状态”有专业且详细的介绍。
确定元素标签
查看并确定欲加过渡动画效果的元素标签，然后在其标签外再加一层<transition></transition>标签，并且要在元素的标签上加v-if或v-show。实例代码：
<transition name="widget-fade">
<div class="widget-body" :class="bodyCss" v-show="show">
<slot name="body"></slot>
</div>
</transition>
定义动画名称
这里同上面的css动画第二步一样，通过css的创建动画规则@keyframes来定义动画。元素进入或离开的动画都在这一步骤中定义。实例代码：
@keyframes widgetfirst {
from {
padding-top: 0;
padding-bottom: 0;
max-height: 0;
overflow: hidden;
}
to {
padding-top: 12px;
padding-bottom: 12px;
max-height: 1000px;
overflow: hidden;
}
}
@keyframes widgettwo {
from {
padding-top: 12px;
padding-bottom: 12px;
max-height: 1000px;
overflow: hidden;
}
to {
padding-top: 0;
padding-bottom: 0;
max-height: 0;
overflow: hidden;
}
}
过渡的css类名
实例代码：
.widget-fade-enter-active {
animation: widgetfirst .5s ease;
}
.widget-fade-leave-active {
animation: widgettwo .3s linear;
}
这里vue官方给出的类名有四种，分别是：v-enter、v-enter-active、v-leave、v-leave-active
1.v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
2.v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
3.v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
4.v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。
- 若在
transition标签中没有写name属性，则类名中直接使用上述以v-开头的就可以； - 若在
transition标签中写了name属性，则类名中的v-改为name属性中定义的名字加-，如实例中所写的。
