vue专栏 04.vue过渡与动画 03.过渡与动画其他 02.列表过渡

 

# 02.列表过渡

[toc]{type: "ol", level: [3,4]}

### 列表过渡
#### css结构
```css
.list-item {
    display: inline-block;
    margin: 10px;
}

.v-enter-from {
    opacity: 0;
    transform: translateY(30px);
}
.v-enter-active {
    transition: all 1s ease-in;
}
.v-enter-to {
    opacity: 1;
    transform: translateY(0);
}

.v-leave-from {
    opacity: 1;
    transform: translateY(0);
}
.v-leave-active {
    transition: all 1s ease-in;
}
.v-leave-to {
    opacity: 0;
    transform: translateY(-30px);
}
```

#### js结构
```js
const app = Vue.createApp({
    data() {
        return {
            list: ['Web1', 'Web2', 'Web3', 'Web4']
        }
    },

    methods: {
        addItem() {
            this.list.push('Web' + (this.list.length + 1));
        },
        delItem() {
            this.list.pop();
        },
    },

    template: `#idea`
}).mount('#app');
```

#### html结构
```html
<template id="idea">
    <div>
        <transition-group>
            <div class="list-item" v-for="item in list" :key="item">{{ item }}</div>
        </transition-group>
        <br>
        <button @click="addItem">增加</button>
        <button @click="delItem">删除</button>
    </div>
</template>
```
![04](imgs/04.png)
![05](imgs/05.png)