Vue.js 转换在 Laravel Blade + Sass 中不起作用

Question

我的 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

Answer 1

您应该将 v-if 更改为 v-show。这样，即使没有显示，该元素也存在于页面中。