image.png
&.fde-enter-active,&.fde-leave-active{
opacity: 1;
transition: all .3s linear;
}
&.fde-enter,&.fde-leave-to{
opacity: 0;
transition: all .3s linear;
}
v2.5.16 列表过渡
<transition-group tag="" name="xiao">
<div
v-for="(item,index) in list" :key="item.id">{{item.id}}{{item.title}}>
</div>
</transition-group>
<button @click="btn">add</button>
第一步：安装：
npm install animate.css --save
第二步：引入及使用：
main.js中：
`import animated from` `'animate.css'` `// npm install animate.css --save安装，在引入`
`Vue.use(animated)`
第三步vue模板中：
`<div class=``"ty"``>`
`<!-- 直接使用animated中的动画class名，注意：必须使用animated这个class名，否则动画会无效 -->`
`<div class=``"box animated bounceInDown"``></div>`
`</div>`
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div id="clk" >
<!--01-->
<!--<transition
name="fade"
enter-active-class="active"
leave-active-class="leave"
>
<div class="cp" v-show="show">
看动画路由的展示
</div>
</transition>-->
<!--02 使用animation库 type="transition"-->
<transition
name="fade"
:duration="{enter:5000,leave:10000}"
appear
enter-active-class="animated bounceInDown fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"
>
<div class="cp" v-show="show">
动画与路由同时使用
</div>
</transition>
</div>
<div id="btn" @click="py($event)">
点击动画变化
</div>
</div>
</template>
<script>
export default {
name: 'dhua',
data () {
return {
msg: '动画与路由同时使用',
show:true
}
},
methods:{
py(even){
this.show=!this.show
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
/*cp fade-enter-active fade-enter-to
cp fade-leave-active fade-leave-to*/
/*1.1进入动画的几种状态*/
.fade-enter {
opacity:0;
}
.fade-leave-to{
opacity:1;
}
.fade-enter-active{
transition:opacity 5s;
}
.fade-leave-active{
opacity:0;
transition:opacity 5s;
}
/*cp fade-enter-active fade-enter-to
cp fade-leave-active fade-leave-to*/
/*1.2 transform 如何与@keyframes结合*/
/*@keyframes bu{
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}*/
/*1.3 transform 如何自定义动画名称
* add==> enter-active-class="active"
leave-active-class="leave" */
#clk{
width: 400px;
height: 200px;
border: 1px solid sandybrown;
margin: 0 auto;
.cp{
margin-top: 20px;
border: 1px solid darkgray;
width: 150px;
height: 30px;
line-height: 30px;
text-align: center;
/*&.fade-enter,&.fade-leave-to{
opacity:0;
}
&.fade-enter-active,&.fade-leave-active{
transition:opacity 5s;
}*/
/*@keyframes bu{
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}*/
/*css3动画的运用*/
/*&.fade-enter-active{
transform-origin:left center;
animation: bu 3s ;
}
&.fade-leave-active{
transform-origin:left center;
animation: bu 3s reverse;
}*/
/*1.3 transform 如何自定义动画名称*/
/*&.active{
transform-origin:left center;
animation: bu 3s ;
}
&.leave{
transform-origin:left center;
animation: bu 3s reverse;
}*/
/*1.4 animation如何与项目结合 appear-active-class="animated swing" 添加appear
* type="transition" 规定以哪个时间为标准
* 自定义动画结束时长 :duration="10000"
* :duration="{enter:5000,leave:10000}"
* */
}
}
#btn{
margin: 20px auto ;
border: 1px solid darkgray;
width: 140px;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
多路由多组件的过渡
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div id="clk" >
<!--02 多个路由或元素组件的过渡-->
<!--<transition name="fade" mode="out-in" >
<div v-if="show" key="1">hello world</div>
<div v-else key="2">bye world</div>
</transition>-->
<!--03 多个组件动态显示-->
<transition name="fade" mode="out-in" >
<component :is="type">
<!--<child v-if="show"></child>
<child-one v-else></child-one>-->
</component>
</transition>
</div>
<div id="btn" @click="py($event)">
点击动画变化
</div>
</div>
</template>
<script>
import Vue from 'vue'
Vue.component('child',{
template:'<div>child</div>'
})
Vue.component('child-one',{
template:'<div>child-one</div>'
})
export default {
name: 'du',
data () {
return {
msg: '多个路由或元素组件的过渡',
// show:true
type:'child'
}
},
methods:{
py(even){
// this.show=!this.show
// 03
this.type=this.type==='child'?'child-one':'child'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
/*cp fade-enter-active fade-enter-to
cp fade-leave-active fade-leave-to*/
/*1.1进入动画的几种状态*/
.fade-enter {
opacity:0;
}
.fade-leave-to{
opacity:1;
}
.fade-enter-active{
transition:opacity 5s;
}
.fade-leave-active{
opacity:0;
transition:opacity 5s;
}
/*cp fade-enter-active fade-enter-to
cp fade-leave-active fade-leave-to*/
/*1.2 transform 如何与@keyframes结合*/
/*@keyframes bu{
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}*/
/*1.3 transform 如何自定义动画名称
* add==> enter-active-class="active"
leave-active-class="leave" */
#clk{
width: 400px;
height: 200px;
border: 1px solid sandybrown;
margin: 0 auto;
.cp{
margin-top: 20px;
border: 1px solid darkgray;
width: 150px;
height: 30px;
line-height: 30px;
text-align: center;
/*&.fade-enter,&.fade-leave-to{
opacity:0;
}
&.fade-enter-active,&.fade-leave-active{
transition:opacity 5s;
}*/
/*@keyframes bu{
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}*/
/*css3动画的运用*/
/*&.fade-enter-active{
transform-origin:left center;
animation: bu 3s ;
}
&.fade-leave-active{
transform-origin:left center;
animation: bu 3s reverse;
}*/
/*1.3 transform 如何自定义动画名称*/
/*&.active{
transform-origin:left center;
animation: bu 3s ;
}
&.leave{
transform-origin:left center;
animation: bu 3s reverse;
}*/
/*1.4 animation如何与项目结合 appear-active-class="animated swing" 添加appear
* type="transition" 规定以哪个时间为标准
* 自定义动画结束时长 :duration="10000"
* :duration="{enter:5000,leave:10000}"
* */
}
}
#btn{
margin: 20px auto ;
border: 1px solid darkgray;
width: 140px;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
vue中appear的用法
https://www.jb51.net/article/121427.htm
