Javascript 为什么这个vue转换没有'；你不能按预期工作吗？

我试着编写简单的幻灯片面板，就像这里一样 但是在Vue.js上。但面板没有滑动，需要等待2秒钟，然后关闭，没有动画。

如果我移除v-If，我可以设置它的动画，改变div的高度。

如何设置删除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>

你好
{{isOpen？“关闭”：“打开”}
导出默认值{
名称：“SlidePanel”，
数据（）{
返回{
伊索彭：错，
}
},
}
.幻灯片媒体{
背景颜色：橙色；
溢出y：隐藏；
}
.幻灯片进入活动状态，.幻灯片离开活动状态{
过渡：高度2s；
}
.滑入，.滑出至{
高度：0px；
}

检查

添加到元素的内联样式（例如style=“font-weight:bold”） 始终覆盖外部样式表中的任何样式，因此可以 被认为具有最高的特异性

因此删除了内联样式

：style=“{height:'400px'}”

，然后添加

高度：400px内部
。幻灯片媒体

下面是一个演示：


newvue({
el:“#应用程序”，
数据（）{
返回{
伊索彭：错
}
},
方法：{
togglePanel:函数（）{
this.isOpen=！this.isOpen
}
}
})
。幻灯片媒体{
背景颜色：橙色；
溢出y：隐藏；
高度：400px；
}
.幻灯片进入活动状态，.幻灯片离开活动状态{
过渡：高度2s；
}
.滑入，.滑出至{
高度：0px；
}

切换面板
你好
代替
高度
，尝试
最大高度
删除
：style=“{height:'400px'}”
然后将其添加到
。幻灯片介质
，那么它应该可以正常工作。谢谢！工作起来很有魅力。