动画vue-优快云博客

本文详细介绍了CSS中的过渡（transition）与动画（animation）效果的实现方式，并深入探讨了Vue.js框架中如何利用transition组件来实现元素的过渡效果。通过具体的代码示例，读者可以了解如何设置过渡的关键帧、时间及曲线等属性。

一、过渡和动画

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
结束状态

enter
enter-to
leave
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>

第一层元素运动

转载于:https://www.cnblogs.com/oneboi/p/7605571.html