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，

内嵌样式已添加到元素（例如，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>

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

1 个答案: