vue 点击按钮显示隐藏有动画效果

whale·fall

于 2021-02-09 18:12:03 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/stm870581942/article/details/113773971

在Vue中，虽然CSS hover伪类可以方便地实现鼠标移入移出的动画效果，但针对点击事件的动画则需要借助transition-group标签。通过这个组件，开发者能够为元素的显示和隐藏添加平滑的动画过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css有鼠标移入移出（hover）的动画效果很方便给，但没有鼠标点击的动画效果，vue中有一个transition-group标签能够实现这一功能。

//注意需要加上key
<div class="lyric-btn" @click="lyric()">词</div>
<transition-group name="lyric">
  <div class="lyric-plate" v-if="isLyric" :key="1">qwe</div>
</transition-group>

//js
data() {
  return {
    isLyric: false,
  };
},
methods: {
 lyric() {
   this.isLyric = !this.isLyric;
   console.log(this.isLyric);
 },
}

//css
<style scoped>
//需要实现的动画效果就加在css中
.lyric-enter,
.lyric-leave-to {
  opacity: 0;
  transform: translateY(10px);
}
.lyric-enter-to,
.lyric-leave {
  opacity: 1;

}
.lyric-enter-active,
.lyric-leave-active {
  transition: all 0.5s;
}
</style>