长风破浪会有时
直挂云帆济沧海

vue列表添加加入动画

transition-group

(1)不同于 <transition>,<transition-group> 会以一个真实元素呈现:默认为一个 <span>(我们可以通过 tag 特性更换为其他元素。)

(2)过渡模式不可用,因为我们不再相互切换特有的元素。

(3)<transition-group> 的内部元素总是需要提供唯一的 key 属性值。

<template>
  <div id="app">
    <div id="list-demo" class="demo">
    <button v-on:click="add">插入一个元素</button>
    <button v-on:click="remove">移除一个元素</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" v-bind:key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data: function(){
    return {
      items: [1,2,3,4,5,6,7,8,9],
      nextNum: 10
    }
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1)
    },
  }
}
</script>
<style>
  /** 方块元素的样式 **/
  .list-item {
    display: inline-block;
    margin-right: 10px;
    background-color: orange;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
  }
  /** 插入过程 **/
  .list-enter-active{
    transition: all 1s;
  }
  /** 移除过程 **/
  .list-leave-active {
    transition: all 1s;
  }
  /*** 开始插入、移除结束的位置变化 ***/
  .list-enter, .list-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }
</style>
赞(4)
未经允许不得转载:阿锋哥前端开发经验分享 » vue列表添加加入动画
分享到: 更多 (0)

几百块就能做营销型企业网站?

查看详情