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

代码如下

<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;
}

原文链接