---

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属性中定义的名字加-，如实例中所写的。