时间：2022-12-02 11:42:27 | 栏目：vue | 点击：次
?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