这次给大家带来Vue.js之css实现过度动画,Vue.js的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-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>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是Vue.js之css实现过度动画的详细内容。更多信息请关注PHP中文网其他相关文章!