动画的阶段
具体请参考文档
https://cn.vuejs.org/v2/guide/transitions.html
1. css实现过度
- transition 动画
<template>
<div>
<button @click="show = !show">Toggle</button>
<div class="ab">
<transition name="adc">
<p v-show="show">I am show</p>
</transition>
</div>
</div>
</template>
<script>
export default {
data () {
return {
show: true
}
}
}
</script>
<style>
.adc-enter-active, .adc-leave-active {
transition: all 2s ease-out;
}
.adc-enter, .adc-leave-to {
opacity: 0;
}
</style>
css改变透明度动画
- css-transform动画
<template>
<div>
<button @click="show = !show">Toggle</button>
<div class="ab">
<transition name="my-trans">
<p v-show="show">I am show</p>
</transition>
</div>
</div>
</template>
<script>
export default {
data () {
return {
show: true
}
}
}
</script>
<style>
.my-trans-enter-active, .my-trans-leave-active {
transition: all .5s ease-out;
}
.my-trans-enter {
transform: translateY(-100px);
opacity: 0;
}
.my-trans-leave-active {
transform: translateY(100px);
}
</style>
css-transform动画
- 动态组件
<template>
<div>
<button @click="onToggle">Toggle</button>
<div class="ab">
<transition name="fade">
//动态组件
<div :is="componentView"></div>
</transition>
</div>
</div>
</template>
<script>
import comA from './components/a.vue'
import comB from './components/b.vue'
export default {
components: {comA, comB},
data () {
return {
componentView: 'com-a'
}
},
methods: {
onToggle () {
if (this.componentView === 'com-a') {
this.componentView = 'com-b'
} else {
this.componentView = 'com-a'
}
}
}
}
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: all 2s ease-out;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
动态组件,mode为默认
同时生效的进入和离开的过渡不能满足所有要求，所以
Vue 提供了 过渡模式in-out: 新元素先进行过渡，完成之后当前元素过渡离开。out-in: 当前元素先进行过渡，完成之后新元素过渡进入。默认情况下是
in-out
上述动画,如果设置mode="out-in"
<transition name="fade" mode="out-in">
<div :is="componentView"></div>
</transition>
实现效果为:
mode="out-in"
注意:如果两个标签名相同,是不会执行动画的,若想执行动画,需要给标签设置不同的key来加以区分
<template>
<div>
<button @click="show = !show">Toggle</button>
<div class="ab">
<transition name="fade" mode="out-in">
<p v-if="show" >i am show</p>
<p v-else >not in show</p>
</transition>
</div>
</div>
</template>
动画效果为:
两个标签名相同的动画,未设置不同的key
如果设置了不同的key,就可以执行动画了
<template>
<div>
<button @click="show = !show">Toggle</button>
<div class="ab">
<transition name="fade" mode="out-in">
//设置不同的key
<p v-if="show" key="1">i am show</p>
<p v-else key="2">not in show</p>
</transition>
</div>
</div>
</template>
两个标签名相同的动画,设置不同的key
2. js实现过渡
具体看官方教程,写的比较详细 JavaScript 钩子
Vue.js中引入jQuery教程:http://www.cnblogs.com/Yann001/p/6850698.html
<template>
<div>
<button @click="show = !show">Toggle</button>
<div class="ab">
<transition
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
:css="false"
>
<p class="animate-p" v-show="show">i am show</p>
</transition>
</div>
</div>
</template>
<script>
import comA from './components/a.vue'
import comB from './components/b.vue'
export default {
components: {comA, comB},
data () {
return {
show: true
}
},
methods: {
// 动画执行的起始位置
beforeEnter: function (el) {
$(el).css({
left: '50px',
opacity: 0
})
},
enter: function (el, done) {
$(el).animate({
left: '200px',
opacity: 1
}, {
duration: 1500,
complete: done
})
},
leave: function (el, done) {
$(el).animate({
left: '500px',
opacity: 0
}, {
duration: 1500,
complete: done
})
}
}
}
</script>
<style>
.animate-p {
position: absolute;
top: 100px;
left: 0;
}
</style>
当让标签隐藏时,执行的是leave动画;
当让标签显示时,执行的是beforeEnter,enter动画
js过渡动画
- 在学习
饿了么外卖app时,发现这样写也可以,
给要执行动画的标签添加transition
<div v-show="detailShow" class="detail" transition="fade">
在CSS代码中
.detail
......
&.fade-transition
opacity: 1
background: rgba(7, 17, 27, 0.8)
&.fade-enter,&.fade-leave
opacity: 0
background: rgba(7, 17, 27, 0)
这样就可以简单的实现一个背景透明度过度的动画
