Vue中transition標簽如何使用

這篇文章主要講解了“Vue中transition標簽如何使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue中transition標簽如何使用”吧！

transition 標簽

transition 標簽：Vue 的內置動畫標簽

作用：在 [插入] / [更新] / [移除] DOM 元素時，在合適的時候給元素添加樣式類名（配合 CSS 樣式使用，實現動畫效果）

注意事項

transition 標簽只能包含 1 個元素；如果里面寫了多個元素，則只生效第一個

transition 包裹的標簽需要設置 v-show / v-if 屬性控制元素的顯示

動畫 CSS 樣式對應的類名

進入：.v-enter 始狀態、.v-enter-to 末狀態、.v-enter-active 進入動畫（Vue2）

離開：.v-leave 始狀態、.v-leave-to 末狀態、.v-leave-active 離開動畫（Vue2）

進入：.v-enter-from 始狀態、.v-enter-to 末狀態、.v-enter-active 進入動畫（Vue3）

離開：.v-leave-from 始狀態、.v-leave-to 末狀態、.v-leave-active 離開動畫（Vue3）

配合 animation

<template>
    <div>
        <button @click="bol = !bol">隱藏/顯示</button>
        <!-- Vue 的內置動畫標簽 transition -->
        <transition>
            <!-- 只能包含 1 個元素 -->
            <h2 v-show="bol">組件動畫效果</h2>
            <!-- 需要設置 v-show / v-if 屬性控制元素的顯示 -->
        </transition>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return { bol: true };
    },
};
</script>

<style>
/* 進入動畫 */
.v-enter-active {
    animation: move 1s;
}

/* 離開動畫 */
.v-leave-active {
    animation: move 1s reverse;
}

@keyframes move {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translate(0);
    }
}
</style>

transition 標簽的屬性

1、name 屬性：用于自動生成 CSS 動畫類名

如果 transition 標簽元素沒有設置 name 屬性，則對應的動畫類名為 v-XXX

如果設置了 name 屬性，則對應的動畫類名為 屬性值-XXX

2、appear 屬性：一開始就生效顯示動畫

<template>
    <div>
        <button @click="bol = !bol">隱藏/顯示</button>
        <!-- transition 標簽元素設置了 name、appear 屬性 -->
        <transition name="moveCartoon" appear>
            <!-- 動畫會在一開始便生效 -->
            <h2 v-show="bol">組件動畫效果</h2>
        </transition>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return { bol: true };
    },
};
</script>

<style>
/* 類名要對應回 name 的屬性值 */
.moveCartoon-enter-active {
    animation: move 1s;
}
.moveCartoon-leave-active {
    animation: move 1s reverse;
}

@keyframes move {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translate(0);
    }
}
</style>

當存在多個 tansition 標簽時，我們可以通過 name 屬性給各個 transition 標簽指定不同的 CSS 動畫效果

配合 transition

<template>
    <div id="app">
        <button @click="bol = !bol">隱藏/顯示</button>
        <transition appear>
            <h2 v-show="bol">組件動畫</h2>
        </transition>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return { bol: true };
    },
};
</script>

<style>
/* 進入：始狀態 */
.v-enter {
    transform: translateX(-100%);
}
/* 進入：末狀態 */
.v-enter-to {
    transform: translateX(0);
}
/* 進入動畫 */
.v-enter-active {
    transition: 1s;
}

/* 離開：始狀態 */
.v-leave {
    transform: translateX(0);
}
/* 離開：末狀態 */
.v-leave-to {
    transform: translateX(-100%);
}
/* 離開動畫 */
.v-leave-active {
    transition: 1s;
}
</style>

也可以將 transition: 1s; 設置到標簽上，就不用寫 v-leave-active、v-enter-active 對應的樣式了

h2 {
    transition: 1s;
}

/* 進入：始位置 */
.v-enter {
    transform: translateX(-100%);
}
/* 進入：末位置 */
.v-enter-to {
    transform: translateX(0);
}

/* 離開：始位置 */
.v-leave {
    transform: translateX(0);
}
/* 離開：末位置 */
.v-leave-to {
    transform: translateX(-100%);
}

transition-group 標簽

• transition 標簽只能包含 1 個元素、 transition-group 標簽可以包含多個元素

• transition-group 標簽里面的元素需要設置 key 屬性，作為當前元素的唯一標識

• 除此之外，其他用法都和 transition 標簽一樣

<template>
    <div id="app">
        <button @click="isEditing = !isEditing">切換</button>
        <transition-group appear>
            <h2 v-if="isEditing" key="save">Save</h2>
            <h2 v-if="!isEditing" key="edit">Edit</h2>
        </transition-group>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return { isEditing: true };
    },
};
</script>

<style>
h2 {
    transition: 0.5s;
    position: absolute;
}
.v-leave {
    opacity: 1;
}
.v-leave-to {
    opacity: 0;
}
.v-enter {
    opacity: 0;
}
.v-enter-to {
    opacity: 1;
}
</style>

如果只有兩個元素，也可以給一個元素的 key 設置不同的狀態來代替 v-if 和 v-else，上面的例子可以重寫為：

<transition>
    <h2 :key="isEditing">
        {{ isEditing ? "Save" : "Edit" }}
    </h2>
</transition>

動畫庫 animate.css

1. 下載：npm install animate.css

2. 引入樣式庫：import "animate.css"

3. 給指定的 transition 標簽添加 name 屬性 animate_animate、animate__bounce

4. 配置 enter-active-class 屬性，指定進入動畫：
   在樣式庫中挑一個進入的樣式值，作為 enter-active-class 屬性值

5. 配置 leave-active-class 屬性，指定退出動畫：
   在樣式庫中挑一個退出的樣式值，作為 leave-active-class 屬性值

<template>
    <div>
        <button @click="bol = !bol">隱藏 / 顯示</button>
        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__bounceIn"
            leave-active-class="animate__bounceOut"
        >
            <h2 v-show="bol">動畫庫的使用</h2>
        </transition>
    </div>
</template>

<script>
import "animate.css"; // 引入樣式庫
export default {
    name: "App",
    data() {
        return { bol: true };
    },
};
</script>

感謝各位的閱讀，以上就是“Vue中transition標簽如何使用”的內容了，經過本文的學習后，相信大家對Vue中transition標簽如何使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！