vue给显示和隐藏加动画效果

liminla!

已于 2023-09-07 15:07:09 修改

阅读量682

点赞数

文章标签： vue.js 前端 javascript

于 2023-09-07 15:06:12 首次发布

原文链接：https://zhuanlan.zhihu.com/p/622764081

版权

代码如下

<transition>
  <div v-show="item.open">
  </div>
</transition>

.v-enter {
  opacity: 0;
}

.v-enter-active {
  transition: opacity 1s;
}
.v-leave-to {
  opacity: 0;
}

.v-leave-active {
  transition: opacity 1s;
}

也可以给transition取名

<transition name='myname'>
  <div v-show="item.open">
  </div>
</transition>

.myname-enter {
  opacity: 0;
}

.myname-enter-active {
  transition: opacity 1s;
}
.myname-leave-to {
  opacity: 0;
}

.myname-leave-active {
  transition: opacity 1s;
}