vue.js - 過渡&動畫 - 無效情況

moreor發表於2018-08-22
Vue.js動畫

前言

在學習vue.js的過渡動畫時，官方案例主要使用了opacity屬性。但是將opacity替換成width後就無動畫效果。通過搜尋發現有人遇到過這種問題，但是都沒有找到問題所在。

替換後程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            width: 600px;
            height: 200px;
            background-color: red;
        }

        .fade-enter-active, .fade-leave-active {
            transition: width .5s;
        }
        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            width: 0px;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="show = !show">button</button>
    <transition name="fade">
        <div id="div1" v-if="show">
        </div>
    </transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        show: false
    }
})
</script>
</body>
</html>
複製程式碼

除錯結果：

vue.js - 過渡&動畫 - 無效情況
發現在class切換到v-leave-to時，width沒起作用，原因是由於CSS選擇器權重的問題導致的#div1的權重要比.fade-leave-to的高。

解決方案

解決方法有兩種： （1）提高選擇器權重：

#div1.fade-enter, #div1.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    width: 0px;
}
複製程式碼

（2）使用!important

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    width: 0px !important;
}
複製程式碼

總結

在使用vue.js中，有的地方需要自己定義特定名稱的CSS類，如果在執行過程中，vue.js自動新增的類沒有問題，但是類中的屬性沒有效果，很有可能是選擇器選中問題。

像這個案例中，動畫切換的類都是在動畫開始，中間，結束時加的，動畫結束後這些類就移除了。除錯很麻煩。

相關文章