Переходы Vue.js не работают в Laravel Blade + Sass - PullRequest
Новая
       10

Переходы Vue.js не работают в Laravel Blade + Sass

0 голосов
/ 16 октября 2018

Мой поиск в Google не дал ответа, является ли это ожидаемым поведением, или я делаю что-то не так.

Мой HTML: 

<a v-on:click="showInformation = !showInformation">Show / Hide</a>
<transition name="fade">
    <p class='further-info' v-if="!showInformation">Lorem ipsum dolor.</p>
</transition>

РЕДАКТИРОВАТЬ: Только что выяснил, чтоэто работает так: 

<transition name="fade">
    <div v-if="!showInformation">
        <p class='further-info'>Lorem ipsum dolor</p>
    </div>
</transition>

Это не задокументировано в документации Vue.js, и ясно показано, что он должен работать в качестве первого примера.Ожидается ли это в моем случае?

Мой SASS: 

.fade-enter-active, .fade-leave-active
    transition: opacity .5s

.fade-enter, .fade-leave-to
    opacity: 0

Довольно прямолинейно, но, возможно, я что-то не так делаю.Всякий раз, когда я нажимаю кнопку, p отображается и скрывается правильно, но без какого-либо эффекта перехода.

Использование: 

Laravel 5.7.9
Vue.js 2.9.6 (with ES6)
Sass 1.14.2 (but not relevant since it complies the transition code correctly)
The HTML file is written a blade template file

1 Ответ

0 голосов
/ 17 октября 2018

Вы должны изменить v-if на v-show.Таким образом, элемент существует на странице, даже если он не отображается.

...