vue中多个元素的动画效果

最新推荐文章于 2024-06-04 02:56:38 发布

叨唠

最新推荐文章于 2024-06-04 02:56:38 发布

阅读量727

点赞数

分类专栏： Vue 文章标签： vue 多个元素动画过渡

本文链接：https://blog.csdn.net/zyz00000000/article/details/84316062

版权

Vue 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

1. 多个标签被transition包裹，并且用v-if 和 v-else

  <style>
    .fade-enter,
    .fade-leave-to {
      opacity: 0
    }
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 2s
    }
  </style>
</head>

<body>
  <div id="demo">
    <button @click="show = !show">click me</button>
    <transition name="fade">
      <div v-if="show">sfsf</div>
      <div v-else>hello</div>
    </transition>
  </div>
  <script>
    new Vue({
      el: '#demo',
      data: {
        show: true
      },
    })
  </script>

上述代码并没有过渡效果，因为div标签复用了。所以必须使用key值，不让标签复用

    <transition name="fade">
      <div v-if="show" key="sfsf">sfsf</div>
      <div v-else key="hello">hello</div>
    </transition>

效果：进的在进，出的在出，进出同时

还可以再transition标签中设置mode属性：mode=“in-out”，效果：进的先进，出的再出

    <transition name="fade" mode="in-out">
      <div v-if="show" key="sfsf">sfsf</div>
      <div v-else key="hello">hello</div>
    </transition

叨唠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中多个元素的动画效果

1. 多个标签被transition包裹，并且用v-if 和 v-else &lt;style&gt; .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-active, .fade-leave-active { transition: opacity 2s }...
复制链接

扫一扫

专栏目录