css怎么同时设置过渡动画,Vue---CSS动画之同时使用过渡和动画

在此之前，我们已经有了过渡动画以及@keyframes动画的基础，但往往能够单独使用他们是不够的，我们需要将二者结合

关于初次加载元素

在animate.css的代码基础上我们可以发现，当页面第一次渲染元素时，并没有出场动画，为了解决这个问题我们需要再添加两个属性

name="fade"

appear

enter-active-class="animated swing"

leave-active-class="animated shake"

appear-active-class="animated swing"

>

Good Moring

戳一戳

复制代码

对比代码可以看出，我们添加了appear和appear-active-class两个属性，这两个属性的意思是我们在元素出现时也有一个动画效果，这个动画效果与我们点击后出现的动画效果保持一致即可

过渡与animate结合

在页面搭建时，我们往往需要将两种动画效果相结合，过渡是通过transition来实现，而animate是通过 @keyframes 来实现

step1：搭建一个animate动画效果的代码结构

step2：给自定义的class名添加我们在过渡动画时使用的class名

enter-active-class="animated swing fade-enter-active"

leave-active-class="animated shake fade-leave-active"

复制代码

step3:根据过渡动画的内容添加CSS样式

.fade-enter{

opacity: 0

}

.fade-enter-active{

transition: opacity 3s

}

.fade-leave-to{

opacity: 0

}

.fade-leave-active{

transition: opacity 3s

}

复制代码

叠加动画效果的时间问题

在这里我们使用了两个动画效果，那这时动画的持续时间到底服从哪一个则没有定论，所以我们需要对此进行设置

type

在上述例子中，过渡动画持续了3s，animate持续为1s，我们以长的时间为例，在transition标签内添加type属性

复制代码

这样动画的持续效果即由过渡动画决定，即为3s

duration

我们也可以自定义动画的时长，在transition标签内添加:duration

复制代码这里的数字所代表的时间单位为ms

我们也可以对出现和消失动画的时长分别设置

复制代码

完整代码展示

.fade-enter{

opacity: 0

}

.fade-enter-active{

transition: opacity 3s

}

.fade-leave-to{

opacity: 0

}

.fade-leave-active{

transition: opacity 3s

}

复制代码

:duration="{enter:5000,leave:5000}"

type="transition"

name="fade"

appear

enter-active-class="animated swing fade-enter-active"

leave-active-class="animated shake fade-leave-active"

appear-active-class="animated swing"

>

Good Moring

戳一戳

var vm = new Vue({

el:'#root',

data:{

show:true

},

methods:{

handleClick:function(){

this.show = ! this.show;

}

}

})

复制代码