Vue中的transition可以帮助我们创建在DOM元素插入、更新或删除时设置过渡动画的效果。当某个元素出现在页面中时，可以使用v-enter-active类来创建过渡效果，当元素离开页面时，可以使用v-leave-active类来添加动画效果，还可以添加v-enter和v-leave-to类来实现活动的开始和结束状态。

<template>
<div class="container"><button @click="toggleShow">Toggle Show</button>
<transition name="fade">
<div v-if="show" class="box">
<h1>Hover Me!</h1>
</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: true
};
},
methods: {
toggleShow() {
this.show = !this.show;
}
}
};
</script>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
width: 200px;
height: 200px;
background-color: #dde0e3;
display: flex;
justify-content: center;
align-items: center;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>

以上代码中，我们使用了transition来给box添加了淡入淡出的效果，同时添加了hover时的动态效果。在style中，我们使用fade-enter-active和fade-leave-active来设置过渡效果，使用fade-enter和fade-leave-to来设置元素开始和结束状态。注意，如果不指定过渡的name属性，我们无法为过渡的类设置动画效果。