Vue.js vueJs相当于jQuery slideDown/slideUp或slideToggle

我第一次尝试vue

我用v-show替换了使用.slideDown/.slideUp的jqueryshow/hide，但是我更喜欢jquery的slideUp/down动画。有没有一种简单的方法可以通过vue实现这一点

简化代码如下：

<nav class="bg-blue" role="navigation">
  <div class="container classes here">
    <div class="classes here">
      <h1 class="classes here"> 
        <a href="/" class="classes here">Site Name
        </a>
      </h1>

      <button class="classes here"  @click="isShowing ^= true">
        hamburger svg here
      </button>
    </div>

    <div class="main-nav classes here" v-show="!isShowing">
      <div class="classes here">
        <!-- nav items here -->
      </div>
    </div>

  </div><!-- /.container -->
</nav>

---

请告知。

您可以为此安装模块，也可以编写自定义组件。我建议第二种选择

<template>

    <div>

        <button @click="isShowing">
            hamburger svg here
        </button>

        <!-- animation of appearance/disappearance.
        More info: https://vuejs.org/v2/guide/transitions.html -->
        <!-- The attribute "name" is used to create custom classes
         that are applied during animation -->
        <transition name="main-nav"
                    @enter="transitionStep1"
                    @after-enter="transitionStep2"
                    @before-leave="transitionStep3"
                    @after-leave="transitionStep4">

            <div class="main-nav" v-show="!active">
                <div class="classes here">Some text</div>
            </div>

        </transition>

    </div>

</template>

<script>

    export default {
        name: "Accordion",
        data() {
            return {
                // set the variable that will hide/show the block
                active: false
            }
        },
        methods: {
            isShowing() {
                // change the value of the variable that will hide/show the block
                this.active = !this.active;
            },
            transitionStep1(el) {
                // set the block height at the moment of its appearance
                el.style.height = el.scrollHeight + 'px'
            },

            transitionStep2(el) {
                // remove inline styles from the block after animation of its appearance
                el.style.height = ''
            },

            transitionStep3(el) {
                // set the height of the block at the beginning of its disappearance animation
                el.style.height = el.scrollHeight + 'px'
            },

            transitionStep4(el) {
                // remove inline styles from the block after the animation of its disappearance
                el.style.height = ''
            },
        },
    }
</script>

<style lang="scss" scoped>

    .main-nav {
        overflow: hidden;
        -webkit-transition: height 0.3s ease;
        transition: height 0.3s ease;
    }
    .main-nav-enter {
        height: 0;
    }
    .main-nav-leave-to {
        height: 0 !important;
    }

</style>

---

使用jQuery，这些动画是基于JavaScript的。使用Vue.js，可以有条件地使用JavaScript启动这些动画，但在实际动画中使用CSS动画。有关更多详细信息，请参见此处：在您的示例中，您可以设置CSS最小高度属性的动画。