渐变transition

这边就像写css一样，只是要渐变的东西包在transition里面，并到css下样式。

• 进场
  1. v-enter-from
  2. v-enter-active
  3. v-enter-to
• 退场
  1. v-leave-from
  2. v-leave-active
  3. v-leave-to

<div style="height:120px">
    <transition>
        <div class="block" v-show="isShow">Hello</div>
    </transition>
</div>
<button @click="isShow=!isShow">Toggle</button>

const app = Vue.createApp({
    data() {
        return {
            isShow: true
        }
    }
});

.block {
    display: block;
    width: 150px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: palevioletred;

}

.v-enter-active,
.v-leave-active {
    transition: opacity 1s;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

.v-enter-to,
.v-leave-from {
    opacity: 1;
}

自订transition名称

赋予name，把css中v-开头改成和name一样就可以自订多个不同的效果

<transition name="fade">
    <div class="block" v-show="isShow">Hello</div>
</transition>

.fade-enter-active,
.fade-leave-active {
    transition: opacity 1s;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
    opacity: 1;
}

条件与动态切换

继上面的范例加上v-if和v-else就可以做条件的动态切换。

<div style="height:120px">
    <transition name="fade">
        <div class="block" v-if="isShow">no1</div>
        <div class="block" v-else>no2</div>
    </transition>
</div>
<button @click="isShow=!isShow">Toggle</button>

渐变效果的顺序

在transition中加上mode属性

1. in-out : 先执行新元素动画，再移除现有的
2. out-in(比较顺畅) : 先移除现有的，再执行新元素动画

<transition name="fade" mode="in-out">
    <div class="block" v-if="isShow">no1</div>
    <div class="block" v-else>no2</div>
</transition>

复数元素/元件的渐变渲染

若使用多个v-if就需要使用transition-group，两个不一样的地方就是内容物必须加入唯一值key才能正常动画且不支援mode。

<div class="mode">
    <label>
        <input v-model="demo" type="radio" value='A'>block A
    </label>
    <label>
        <input v-model="demo" type="radio" value='B'>block B
    </label>
    <label>
        <input v-model="demo" type="radio" value='C'>block C
    </label>
</div>
<transition-group name="fade">
    <div v-if="demo==='A'" :key="block-a" class="block">A block</div>
    <div v-if="demo==='B'" :key="block-b" class="block">B block</div>
    <div v-if="demo==='C'" :key="block-c" class="block">C block</div>
</transition-group>

const app = Vue.createApp({
    data() {
        return {
            demo: 'A',
            isShow: true
        }
    }
});

transition-group最常与v-for搭配尤其是列表显示，范例中的tag属性可以指定最外层由谁包覆。

<button @click="add">Generate a random number</button>
<button @click="list.length=0">Remove all</button>
<transition-group tag="ul" class="number-list" name="list">
    <li v-for="(item,index) in list" :key="index" class="item">{{item}}</li>
</transition-group>

const app = Vue.createApp({
    data() {
        return {
            list: [1, 2, 3, 4, 5]
        }
    },
    methods: {
        add() {
            const randomNumber = Math.ceil(Math.random() * 100 + 1)
            this.list.push(randomNumber)
        }
    }
});

#app {
    position: relative;
    display: block;
    padding: 1rem;
    font-size: 1rem;
}
button {
    font-size: 1rem;
    margin-bottom: 1rem;
    margin-right: 1rem;
}
.number-list {
    overflow: hidden;
    padding: 0;
    margin-bottom: 1.5rem;
}
.number-list>li {
    display: block;
    float: left;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    background-color: #f00;
    color: #fff;
    margin-right: 1rem;
    margin-left: 0;
    margin-bottom: 1rem;
}
.list-enter-active,
.list-leave-active,
.list-move {
    transition: opacity 0.7s, transform 0.7s;
}
/*按remove时会回到最左边淡出*/
.list-leave-active {
    position: absolute;
}
.list-enter-from {
    opacity: 0;
    transform: translateY(-20px);
}
.list-leave-to {
    opacity: 0;
    transform: translateY(20px);
}

除了上面渐变的class外，还有新增一个v-move，当元素改变定位时进行的动画。

<button @click="add">Add</button>
<button @click="shuffle">Shuffle</button>
<transition-group tag="ul" class="number-list" name="list">
    <li v-for="(item,index) in list" :key="item" class="item">{{item}}</li>
</transition-group>

const app = Vue.createApp({
    data() {
        return {
            list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            nextNum: 10
        }
    },
    methods: {
        randomIndex() {
            return Math.floor(Math.random() * this.list.length)
        },
        add() {
            this.list.splice(this.randomIndex(), 0, this.nextNum++)
        },
        shuffle() {
            this.list.sort(() => Math.random() - 0.5)
        }
    }
});

.list-move {
    transition: all 5s ease
}