动画vue

一、过渡 和动画

1. transition

过过渡一定得有属性差值

过渡一定和时间相关

div
{
transition: width 1s linear 2s;
}

多个睡醒之间有逗号像个，

2. animation

div
{
animation: myfirst 5s linear 2s infinite alternate;
}

二、Vue中的transition

到2.0以后 transition 组件

<transition name="fade">
    运动东西(元素，属性、路由....)
</transition>

vue中 过渡使用内置组件transition,
需要过渡的东西放在transition组件里面包裹起来

name属性 和css值

进入:

离开:

下面的类可以被用来定义过渡的过程时间，延迟和曲线函数。(过渡的时间，过渡的形式和延迟 ）

name-enter-active
name- leave-active

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

---

1.过渡的关键

四个状态 两个过程 ,动画必须写在过程的class上面的

• 初始状态 enter

• 中间状态1

• 中间状态2

• 结束状态

1. enter
2. enter-to
3. leave
4. leave -to

---

2. 动画的关键

动画只要过程，不要初始和结束状态

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}

如何animate.css配合用？

直接写name或者使用class名称

    <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
                <p v-show="show"></p>
            </transition>

第一层元素运动