Vue列表动画的实现

最新推荐文章于 2023-04-28 09:44:36 发布

六代目专机

最新推荐文章于 2023-04-28 09:44:36 发布

阅读量164

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Ghost__H/article/details/117717201

版权

Vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1.列表动画的实现

 <style>
      .v-enter-from {
        opacity: 0;
        transform: translateY(30px);
      }
      .v-enter-active {
        transition: all 0.5s ease-in;
      }
      .v-enter-to {
        opacity: 1;
        transform: translateY(0);
      }
      // 列表添加新元素往后移动时的效果
      .v-move {
        transition: all 0.5s ease-in;
      }
      .list-item {
        display: inline-block;
        margin-right: 10px;
      }
    </style>

const app = Vue.createApp({

     data(){

               return {list:[1,2,3]}         
        },
        methods: {
        handleClick() {
          this.list.unshift(this.list.length + 1);
        },

      },
       template: `
            <div>
              // 多个元素的效果用transition-group
                <transition-group>
                    <span v-for="item in list" :key="item" class="list-item">{{item}} 
                    </span>
                </transition-group>
                <button @click="handleClick">增加</button>
            </div>
        `,
})