Добавить переход к элементу контейнера, когда исчезает его содержимое с помощью Vue - PullRequest
Новая
       16

Добавить переход к элементу контейнера, когда исчезает его содержимое с помощью Vue

0 голосов
/ 06 июля 2019

У меня есть этот компонент Vue: 

<template>
    <div class="container">
        <h2>Title</h2>
        <p>Lorem ipsum</p>    
        <button @click="toggleNotes">
            Notes
        </button>
        <transition name="fade">
            <div v-if="showNotes">
                <p>Some random notes here</p>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showNotes: false,
        }
    },
    methods: {
        toggleNotes() {
            this.showNotes = ! this.showNotes
        }
    }
}
</script>

<style>
    .fade-enter-active {
        transition: opacity .5s;
    }
    .fade-leave-active {
        transition: opacity .1s;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>

Это работает, если заметки исчезают и исчезают при нажатии кнопки.Но контейнер div прыгает по высоте до и после перехода в ответ на появляющийся / исчезающий текст.Есть ли у контейнера способ оживить свою высоту вместо прыжка?Проблема в том, что высота не может быть известна заранее - количество текстов в области заметок произвольно.

...