vue中列表增删时的动画过渡效果

痛定思痛。 2022-04-15 04:06 419阅读 0赞

用transition-group 包裹标签，注意没有name属性，要使用v-enter等类

<style>
        .v-enter,
        .v-leave-to {
          opacity: 0
        }
        .v-enter-active,
        .v-leave-active {
          transition: opacity 2s
        }
      </style>
    </head>
    
    <body>
      <div id="demo">
        <button @click="handleClick">add item</button>
        <transition-group>
          <div v-for="item of lists" :key="item.id">{
       {item.id}}、{
       {item.title}}</div>
        </transition-group>
      </div>
      <script>
    
        new Vue({
          el: '#demo',
          data: {
            count: 0,
            lists: []
          },
          methods:{
            handleClick () {
               this.lists.push({
                 id: this.count++,
                 title: 'new add item'
               })
            }
          }
        })
      </script>

结果：添加新的内容时，是过渡效果添加上去的

![20181121121457874.png][]

原理：每增加一项的时候，其实就是增加了一个transition标签包裹该项的标签。

<transition>
          <div>{
       {item.id}}、{
       {item.title}}</div>
        </transition>
        <transition>
          <div>{
       {item.id}}、{
       {item.title}}</div>
        </transition>
        <transition>
          <div>{
       {item.id}}、{
       {item.title}}</div>
        </transition>
        <transition>
          <div>{
       {item.id}}、{
       {item.title}}</div>
        </transition>

所以：不能再transition-group标签上写name属性，不然name属性都一样了。

[20181121121457874.png]: /images/20220415/7fbdd968efb24478a54bd621b8955fbe.png

发表评论取消回复

表情：

评论列表（有 0 条评论，419人围观）

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

相关阅读

相关 40 Vue3制作动画过渡效果

\[动画\] 用Vue3制作过渡效果阐述准备基础文件增加过渡效果总结阐述有了39节内容的学习，本节我们在它的基础上用Vue的内

阳光穿透心脏的1/2处/ 2023年10月06日 20:41/ 0 赞/ 29 阅读

相关 Vue 过渡 & 动画

概述 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class 可以配合使用

Love The Way You Lie/ 2023年07月01日 12:53/ 0 赞/ 51 阅读

相关 vue过渡动画

vue 过渡动画可以分为两部分 1.vue内置类名：匿名动画，具名动画内置类名：进入进入前动画名-enter

￡神魔★判官ぃ/ 2022年11月29日 12:23/ 0 赞/ 298 阅读

相关 Vue的过渡&动画效果-transition

![20210727104234223.gif][] / 可以设置不同的进入和离开动画 / / 设置持续时间和动画函数 / .fade-

我不是女神ヾ/ 2022年09月01日 08:12/ 0 赞/ 280 阅读

相关 vue中列表增删时的动画过渡效果

用transition-group 包裹标签，注意没有name属性，要使用v-enter等类 <style> .v-enter, .v

痛定思痛。/ 2022年04月15日 04:06/ 0 赞/ 420 阅读

相关 vue中组件的过渡动画

1. 和多个元素的过渡一样，用组件来替换transition中包裹的标签 <style> .fade-enter, .fade-le

灰太狼/ 2022年04月15日 03:56/ 0 赞/ 329 阅读

相关 Vue中使用 transition动画，vue过渡动画

[Vue][]的动画并没有非常炫酷的效果，不过也是有一些实用性的，在项目中有的地方使用，也是能够营造出不同的效果下面为大家列举两个简单实现动画的例子，动画其实很简单，就是利

小鱼儿/ 2022年03月11日 08:08/ 0 赞/ 933 阅读

相关 Vue.js学习笔记：过渡效果（含列表过渡）

Vue 提供了 `transition` 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡条件渲染（使用 `v-if`）

我不是女神ヾ/ 2021年09月14日 02:16/ 0 赞/ 479 阅读

相关 Vue - Vue中列表过渡

Vue中列表过渡标签：`<transition-group>` <template> <div> <h2>Vue中的列表过渡</h

╰+哭是因爲堅強的太久メ/ 2021年07月25日 19:11/ 0 赞/ 455 阅读

相关 Vue中transition过渡效果

目录一，进入/离开过渡效果二，过渡效果的钩子函数三，过渡效果+Animate.css 四，列表过渡 -------------------- 一，进入

超、凢脫俗/ 2021年07月25日 14:46/ 0 赞/ 647 阅读