【Vue】组件和元素切换动画的实现
<template>
<transition name="fade">
<!-- 这里是你要切换的元素，比如一个段落或图片 -->
<p v-if="show">Hello, Vue.js!</p>
</transition>
</template>
<script>
export default {
data() {
return {
show: true
};
},
methods: {
toggleElement() {
this.show = !this.show;
}
}
};
</script>
<style>
/* 定义fade动画 */
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
opacity: 0;
}
</style>这个例子展示了如何在Vue中使用<transition>元素来包裹需要动画效果的元素，并定义了一个简单的淡入淡出动画。通过改变show数据属性的值，可以触发元素的显示与隐藏，并应用定义好的动画效果。
评论已关闭