vue中过度动画之列表添加删除动画实现

思路：

完成页面结构及添加数据和删除数据逻辑
包裹列表使用transition-group标签，将该有的类名加上。这样写了效果是有了，但是过渡比较生硬，如何让它平滑一点？
加v-move类名

<style>
      .slide-enter, .slide-leave-to {

      }
      .slide-leave, .slide-enter-to {

      }
      .slide-enter-active {
        animation: slide-in 2s ease-out;
      }
      .slide-leave-active {
        animation: slide-out 2s ease-out;
        /* 这里在离开的时候，需要让这个元素脱离标准流，不然后面的元素动不了 */
        position: absolute;
      }
      /* 想要让动画平滑一点，需要加v-move的类名，v-可以别name的值 */
      .slide-move {
        transition: all 2s;
      }

      @keyframes slide-in {
        from {
          transform: translateY(50px)
        }
        to {
          transform: translateY(0)
        }
      }
      @keyframes slide-out {
        from {
          transform: translateY(0)
        }
        to {
          transform: translateY(50px)
        }
      }
</style>
<body>
  <div id="app">
    <button @click="addItem">添加数据项</button>
    <ul>
      <transition-group name="slide">
        <li v-for="(item, index) in list" :key="item" @click="removeItem(index)">{{item}}</li>
      </transition-group>
    </ul>
  </div>
  <script>
      var vm = new Vue({
        el: '#app',
        data: {
          list: [1, 2, 3, 4]
        },
        methods: {
          addItem() {
            this.list.push(this.list[this.list.length-1] + 1)
          },
          removeItem(idx) {
            this.list.splice(idx, 1)
          }
        }
      })
  </script>
</body>

vue中过度动画之列表添加删除动画实现

思路：

猜你喜欢