|
|
官方比较正式的解释请点击下方链接：
https://cn.vuejs.org/v2/guide/transitions.html
transition里的元素触发了v-if或者 v-show之类的操作时候，Vue 将会做处理：
自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名（本例用的是css方式，话说，能用css解决的为什么要麻烦js~~）。
过渡的类名有六种，代码中css里有备注说明各个类名的用途。
如果你使用一个没有名字的 <transition>这些类名的默认前缀。如果你使用了 <transition name="fade">,那么 v-enter 会替换为 fade-enter。
接下来上代码：<template>
<div>
<div>
<mt-button @click="showBtn1 = !showBtn1">过渡</mt-button>
<transition name="fade">
<div style="margin-top: 20px;" v-show="showBtn1">我赌你的枪里没有子弹</div>
</transition>
</div>
<div style="margin-top: 20px;">
<mt-button @click="showBtn2 = !showBtn2">动画</mt-button>
<transition name="bounce">
<div style="margin-top: 20px;" v-if="showBtn2">我赌你的枪里没有子弹</div>
</transition>
</div>
</div>
</template>
<script>
export default {
data () {
return {
showBtn1: false,
showBtn2: false,
}
},
computed: {
},
methods:{
}
}
</script>
<style lang="css" scoped>
/* 元素开始进入前和离开后的状态（还没做过渡的样子，比如隐藏掉目标元素） */
.fade-leave-to, .fade-enter{
opacity: 0;
transform: translateY(30px) scale(0);
}
/* 元素进入后和离开前的状态，（做完过渡应该展示的样式，可不设置此项 ）*/
.fade-enter-to, .fade-leave{
opacity: 1;
transform: translateY(0) scale(1);
}
/* 元素正处于进入和离开的过程中（过渡进行中）*/
.fade-enter-active, .fade-leave-active{
transition: all .3s;
}
/* 动画类只需要写这两条css即可*/
.bounce-enter-active {
animation: bounce-in .6s;
}
.bounce-leave-active {
animation: bounce-in .6s reverse;
}
/* 定义元素要执行的动画*/
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style> |
作者：赤焰妖狐
链接：https://www.jianshu.com/p/0ad70b90d49b
来源：简书
程序猿的技术大观园：www.javathinker.net
|
|
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → vue的CSS过渡和动画范例
消息
查看
搜索
好友
邮件
复制
引用
IP: 已设置保密