为什么这种vue转换无法按预期进行？

Question

I'm trying to code simple slide panel, like here http://anton.shevchuk.name/wp-demo/jquery-tutorials/simple-slide-panel.html but on Vue.js. But panel doesn't slide it's wait 2 seconds then close without animation. https://codepen.io/TogusaRusso/pen/dqoMLr

If I remove v-if, I can animate it, changing height of div. https://codepen.io/TogusaRusso/pen/mGJEEJ

How can I animate removing of 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

Check MDN: Css Specificity ,

Inline styles added to an element (eg, style="font-weight:bold") always overwrite any styles in external stylesheets , and thus can be thought of as having the highest specificity.

So removed the inline styles :style="{height: '400px'}" , then add height:400px; inside .slide-media .

Below is one demo:

 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>