动画与过渡
geihub里面有个animate.css类库,有很多可以,集成三方。
<button @click="flag=!flag">切换</button>
<p></p>
<transition name="bounce">//fade就是方法名!
<img v-if="flag" :src="pic" alt="">
</transition>
import pic from '@/assets/图片名.jpg' //导入图片,@自动到当前目录下面
data(){
return{
pic:pic,
flag:true
}
}
.bounce-enter-active{
animation:bounce .5s;
}
.bounce-leave-active{
animation:bounce reverse; //CSS基础比较重要!
}
@keyframes bounce{ //Js的基础知识
0%{
transform:scale(0);
}
50%{
transform:scale(1.5);
}
100%{
}
}
集成三方类库animate.css:open in terminal在终端打开,执行命令:npm install animate.css --save
它还有自己的官方文档:https://daneden.github.io/animate.css/
<button @click="flag=!flag">切换</button>
<p></p>
<transition enter-active-class = "animated tada" leave-active-class = "animated bounceOutRight" :duration="{enter:1000,leave=500}">
<!--在github的document中可以找到官方应用文档!上面的tada和animated标签组合使用!-->
<!--animate还有自己的官方文档:https://daneden.github.io/animate.css/!-->
<img v-if="flag" :src="pic" alt="">
</transition>
import pic from '@/assets/图片名.jpg' //导入图片,@自动到当前目录下面
import animate from 'animate.css'//在Vue.js官方文档中,搜索‘#自定义过渡的类名’
data(){
return{
pic:pic,
flag:true
}
}
.bounce-enter-active{
animation:bounce .5s;
}
.bounce-leave-active{
animation:bounce reverse; //CSS基础比较重要!
}