VueJS эквивалент jQuery slideDown/slideUp или slideToggle


VueJS эквивалент jQuery slideDown/slideUp или slideToggle

05.10.2019 04:30:56 Просмотров 1 Источник

Я впервые экспериментирую с vue.

Я заменил jQuery show/hide, который использовал .slideDown() / .slideUp(), на v-show - однако я предпочитаю анимацию slideup/down jQuery. Есть ли простой способ сделать это с помощью 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>

Пожалуйста, посоветуйте.

У вопроса есть решение - Посмотреть?

Ответы - VueJS эквивалент jQuery slideDown/slideUp или slideToggle / vueJs equivalent of jQuery slideDown/slideUp or slideToggle

Roman Bondar

14.09.2020 09:12:02

Для этого можно установить модули или написать пользовательский компонент. Я предлагаю второй вариант.

<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>
Помочь в развитии проекта:
Закрыть X