Vue3过渡&动画实现
<template>
<div id="app">
<transition name="fade">
<img v-if="show" key="logo" src="./assets/logo.png">
</transition>
<button @click="show = !show">Toggle Image</button>
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
}
}
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
</style>这个Vue 3示例展示了如何使用内置的过渡元素以及CSS过渡类来创建一个淡入淡出效果的图片组件。通过点击按钮来切换图片的显示状态，使用了<transition>包裹了<img>元素，并定义了相关的CSS样式。这是Vue框架中实现组件过渡效果的一个基本示例。
评论已关闭