javascript - 为什么这个 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 Specificity ,

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

因此删除了内联样式 :style="{height: '400px'}"，然后在 .slide-media< 内添加 height:400px;/.

下面是一个演示:

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>