脚本宝典收集整理的这篇文章主要介绍了vue中transition组件在项目中运用小结，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
vue中的transtion是一个动画过渡封装组件，常见的情景时用transITion标签包裹的DOM含有动画效果。transition组件的动画效果过渡设置基于css的transition属性设置。下面给大家介绍下vue中transition组件在项目中运用。
注意：
<template>
<div>
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
</template>
<script>
export default {
data () {
return {
show: true
}
},
}
</script>
<style scoPEd lang="less">
.fade-enter-active,
.fade-leave-active {
transition: all .5s;
}
.fade-leave-to {
opacity: 0;
transform: translatex(20px);
}
.fade-enter{
opacity: 0;
transform: translateX(-20px);
}
</style>
注意 ：
<template>
<div>
<transition name="fade">
<button class="position" @click="change" :key="status">
组件
</button>
</transition>
</div>
</template>
<script>
export default {
data () {
return {
status: '1',
}
},
methods: {
change () {
if(this.docState === '1'){
this.docState = '2'
}else{
this.docState = '1'
}
}
}
}
</script>
<style scoped lang="less">
.fade-enter-active,
.fade-leave-active {
transition: all .5s;
}
.fade-leave-to {
opacity: 0;
transform: translateX(20px);
}
.fade-enter{
opacity: 0;
transform: translateX(-20px);
}
.position{
position: absolute;
}
</style>
注意
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="external nofollow" rel="stylesheet" type="text/css"> <div id="example-3"> <button @click="show = !show"> Toggle render </button> <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">hello</p> </transition> </div>
给transition添加 appear
到此这篇关于vue中transition组件在项目中运用的文章就介绍到这了,更多相关vue中transition组件内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的vue中transition组件在项目中运用小结全部内容，希望文章能够帮你解决vue中transition组件在项目中运用小结所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。