vue中多个元素的动画效果

心已赠人 2022-04-15 03:54 238阅读 0赞

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 条评论，238人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue过渡动画，组件动画，元素动画（vue2元素、组件过渡动画）

在 CSS 中，你需要定义以 name 属性值为前缀的六个类名来控制过渡的不同阶段。例如，如果 name="fade"，则需要定义以下类：.fade-enter-acti...

ゝ一纸荒年。/ 2024年04月22日 22:30/ 0 赞/ 91 阅读

相关 Vue多个元素的过渡

多个元素的过渡对于原生标签可以使用 `v-if/v-else` 。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素： <transition>...

以你之姓@/ 2024年04月17日 05:30/ 0 赞/ 75 阅读

相关 Vue—动画效果、过渡效果、多个元素过度（transition-group）、集成第三方库

目录总结一、动画效果二、过渡效果三、多个元素过度transition-group 四、集成第三方动画动画库安装引入使用 ---------

怼烎@/ 2024年04月07日 16:01/ 0 赞/ 60 阅读

相关 Vue-动画效果

vue动画效果 vue中动画效果是很简单的一个东西，vue帮助我们做了一些动画封装，同时也支持自定义动画，过度，第三方库，这些方式都可以实现，我们一一举例说明注意：下

Dear 丶/ 2023年10月12日 19:37/ 0 赞/ 104 阅读

相关 Vue之多元素组件过渡+动画封装

课程大纲（1）多元素过渡（2）多组件过渡（3）列表过渡（4）动画封装多元素过渡首先介绍下如何实现多元素过渡

灰太狼/ 2023年05月29日 05:13/ 0 赞/ 123 阅读

相关 vue中如何实现多个元素或组件的过渡动画?

文章目录 1.多个元素之间如何实现过渡动画效果? 2.多个组件之间如何实现过渡动画效果? 3.多个组件之间如何动态实现过渡?

深藏阁楼爱情的钟/ 2022年10月22日 02:46/ 0 赞/ 229 阅读

相关 jQquery :animated 给没有动画效果的元素添加动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

￡神魔★判官ぃ/ 2022年07月13日 10:40/ 0 赞/ 264 阅读

相关 vue中多个元素的动画效果

1. 多个标签被transition包裹，并且用v-if 和 v-else <style> .fade-enter, .fade-le

心已赠人/ 2022年04月15日 03:54/ 0 赞/ 239 阅读

相关前端框架vue.js系列（11）：元素动画过渡效果

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。它们包括：（1）在CSS过渡和动画中自动应用 class （2）配合使用第三方 CSS 动画库，

谁借莪１个温暖的怀抱￠/ 2021年09月14日 06:30/ 0 赞/ 504 阅读

相关 Vue - Vue中多个元素或组件的过渡

Vue中多个元素或组件的过渡一. Vue中多个元素的过渡二. Vue中多个组件的过渡一. Vue中多个元素的过渡 transition 标签 `

逃离我推掉我的手/ 2021年07月26日 00:52/ 0 赞/ 476 阅读