下面是“Vue运用transition实现过渡动画”的完整攻略。
一、transition基本概念
在Vue中使用<transition>
组件可以优雅地实现过渡动画效果。<transition>
组件是Vue内置的过渡动画组件。它可以在元素显示、隐藏、插入和删除时,根据设置的动画属性进行动画过渡。
<transition>
组件包裹的元素,如果需要过渡时,可以设置以下4个状态:
- enter:进入动画前状态。
- enter-active:进入动画时状态。
- leave:离开动画前状态。
- leave-active:离开动画时状态。
过渡模式
<transition>
组件有两种过渡模式:in-out和out-in。
- in-out:设置过渡时间后,元素先执行进入动画,动画结束后,再执行离开动画,这是默认的过渡模式。
- out-in:元素执行离开动画,动画结束后,再执行进入动画。
二、transition实现过渡动画的具体步骤
- 在组件内声明
<transition>
组件。 - 给
<transition>
组件设置过渡动画属性。 - 在需要过渡动画的元素上添加
v-show
或v-if
等Vue指令控制元素显隐。
示例1:元素显隐过渡
下面是一个基本示例代码,实现了一个简单的文本框元素的显隐动画过渡效果。
<template>
<div>
<button @click="show=!show">点击显示/隐藏</button>
<transition name="fade">
<p v-if="show">这是一个文本框</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false
};
}
};
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
上面代码中,<transition>
组件的name
属性设置为fade
,表示这是一个淡入淡出效果的动画过渡。<p>
标签内使用了v-if
指令控制其显隐,属性值为show
,接着在data()
函数中定义了show
初始值为false
,意味着文本框一开始是隐藏的。最后是CSS样式,通过opacity
属性来控制元素的透明度。当动画过渡时,opacity
的值在0到1之间变化,就会出现淡入淡出的效果。
示例2:列表过渡
下面是一个列表过渡的示例代码,实现了一个商品列表的动态添加和删除效果。
<template>
<div>
<button @click="addItem">添加商品</button>
<ul>
<transition-group name="list" tag="ul">
<li v-for="(item, index) in items" :key="index">
{{ item }}
<button @click="removeItem(index)">删除</button>
</li>
</transition-group>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ["商品1", "商品2", "商品3"]
};
},
methods: {
addItem() {
this.items.push(`商品${this.items.length + 1}`);
},
removeItem(index) {
this.items.splice(index, 1);
}
}
};
</script>
<style scoped>
.list-enter-active,
.list-leave-active {
transition: all .5s;
}
.list-enter,
.list-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>
上面的代码中,使用了<transition-group>
组件将<li>
元素包裹起来,其name
属性值为list
,表示这是一个列表过渡动画。标签名设置为ul
,意味着过渡动画元素是<ul>
标签。在v-for
指令中遍历了items
数组,为每个数组元素设置了一个<li>
标签,使用key
属性来绑定每个元素的唯一标识,以便于<transition-group>
组件知道哪个元素应该添加到或移除出列表。<li>
标签内的删除按钮绑定了removeItem()
函数,实现了元素的删除效果。最后是CSS样式,通过opacity
和transform
属性来实现元素的淡入淡出和移动效果,过渡时间为0.5秒,效果更加平滑自然。
到这里,我们就讲解完了“Vue运用transition实现过渡动画”的完整攻略,希望对你有帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vue运用transition实现过渡动画 - Python技术站