CSS3及Vue动画效果

一、CSS3动画animation

keyframes被称为关键帧,其类似于flash中的关键帧。在css3中其主要以“@keyframes"开头,后满紧跟着是动画名称加上一对花括号{...},括号中就是一些不同时间段样式规则

在一个"@keyframes"中的样式规则可以有多个百分比构成的,如在”0%"到"100%"之间创建更多个百分比,分别给每个百分比中给需要有动画效果的元素加上不同的样式,从而达到一种在不断变化的效果。

经验与技巧:在@keyframes中定义动画名称时,其中0%和100%还可以使用关键词from和to来代表,其中0%对应的是from,100%对应的是to

@keyframes changecolor{
  0%{
    background: red;
  }
  20%{
    background:blue;
  }
  40%{
    background:orange;
  }
  60%{
    background:green;
  }
  80%{
    background:yellow;
  }
  100%{
    background: red;
  }
}

当你在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

1.规定动画的名称
2.规定动画的时长

div {
  animation:changecolor 5s;
  -moz-animation: changecolor 5s;   /* Firefox */
  -webkit-animation: changecolor 5s;    /* Safari 和 Chrome */
  -o-animation: changecolor 5s; /* Opera */
}

二、Vue的v-if动画

Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡

1.条件渲染 (使用 v-if)
2.条件展示 (使用 v-show)
3.动态组件
4.组件根节点
一个典型的例子:
HTML:

Hello world.

JS:


CSS:


.v-leave 当前元素准备从显示转变成隐藏,在动画开始前添加到元素上,动画一旦开始会立即删除;

.v-leave-active 在动画过渡过程中,元素一直拥有该样式,直到动画结束则自动删除,用于设置过渡的效果;

.v-leave-to 在动画过渡过程中,元素一直拥有该样式,直到动画结束则自动删除,用于设置动画最终的效果;

事例中,当点击 button,div 并不会马上 display: none, 而是首先设置 .v-leave ,下一刻即删除 .v-leave ,同时添加 .v-leave-active .v-leave-to,当 .v-leave-active 中的过渡时间执行完成,则删除 .v-leave-active .v-leave-to,同时添加 display: none。

.v-enter 当前元素准备从隐藏转变成显示,在动画开始前添加到元素上,动画一旦开始会立即删除;

.v-enter-active 在动画过渡过程中,元素一直拥有该样式,直到动画结束则自动删除,用于设置过渡的效果;

.v-enter-to 在动画过渡过程中,元素一直拥有该样式,直到动画结束则自动删除,用于设置动画最终的效果;

事例中,当点击 button,div 马上清除 display: none, 然后设置 .v-enter ,下一刻即删除 .v-enter ,同时添加 .v-enter-active .v-enter-to,当 .v-enter-active 中的过渡时间执行完成,则删除 .v-enter-active .v-enter-to。

你可能感兴趣的:(CSS3及Vue动画效果)