為什么這種vue轉換無法按預期進行？

Question

我正在嘗試對簡單的幻燈片面板進行編碼，例如http://anton.shevchuk.name/wp-demo/jquery-tutorials/simple-slide-panel.html，但在Vue.js上。 但是面板不會滑動，它會等待2秒鍾，然后關閉而不顯示動畫。 https://codepen.io/TogusaRusso/pen/dqoMLr

如果刪除v-if，則可以對其進行動畫處理，從而更改div的高度。 https://codepen.io/TogusaRusso/pen/mGJEEJ

如何為移除div設置動畫？

<template>
    <v-flex xs12 sm6 offset-sm3>
        <transition name="slide" :duration="2000">
            <div
                class="slide-media"
                :style="{height: '400px'}"
                v-if="isOpen"
            >Hello!</div>
        </transition>
        <v-btn
            flat color="orange"
            @click="isOpen=!isOpen"
        >
            {{isOpen?"Close":"Open"}}
        </v-btn>
    </v-flex>
</template>

<script>
    export default {
        name: 'SlidePanel',
        data() {
            return {
                isOpen: false,
            }
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .slide-media {
        background-color: orangered;
        overflow-y:hidden;
    }
    .slide-enter-active, .slide-leave-active {
        transition: height 2s;
    }
    .slide-enter, .slide-leave-to {
        height: 0px;
    }
</style>

Answer 1

檢查MDN：CSS特異性 ，

添加到元素的內嵌樣式 （例如，style =“ font-weight：bold”） 始終會覆蓋 外部樣式表中的任何樣式 ，因此可以認為具有最高的特異性。

因此，刪除了內聯樣式:style="{height: '400px'}" ，然后添加height:400px; 在.slide-media內部。

以下是一個演示：

 new Vue({ el: '#app', data(){ return { isOpen: false } }, methods: { togglePanel: function () { this.isOpen = !this.isOpen } } }) 

 .slide-media { background-color: orangered; overflow-y:hidden; height:400px; } .slide-enter-active, .slide-leave-active { transition: height 2s; } .slide-enter, .slide-leave-to { height: 0px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <div id="app"> <button @click="togglePanel()">Toggle Panel</button> <transition name="slide" :duration="2000"> <div class="slide-media" v-if="isOpen" >Hello!</div> </transition> </div>