javascript - Vuejs 过渡仅在幻灯片打开时发生

Question

我正在尝试在单击切换按钮时进行移动转换。我设法使过渡适用于 slider ，但类中的文本 div.hello幻灯片打开时没有动画。

<transition name="slide">
    <aside v-if="sidebarOpen" :class="{ 'open' : sidebarOpen }">
      <a href="#">Haha</a>
      <a href="#">Nice</a>
      <a href="#">Menu</a>
    </aside>

</transition>
<div class="hello" :class="{ 'open' : sidebarOpen }">
   <p>This is a paragraph.</p>
   <p>This is a paragraph.</p>
   <p>This is a red.</p>
</div> 

但是如果我们把 .hello在转换标签内，发生转换，但在幻灯片上打开所有 p文本进入 slider ，但没有文本可见。

我还尝试创建另一个 transition div.hello 的标签喜欢<transition name="cslide"><div class="hello">..但它无法正常工作。

我想要的是，所有 p 标签都在幻灯片打开时移动到右侧，并在幻灯片关闭时再次移动到左侧，并使用 css 转换。

Codepen

Answer 1

文本没有动画，因为你没有设置任何过渡属性，你只需要添加这个:

.hello {
  position: absolute;
  left: 0;
  color: white;
  transition: all .3s ease;
}
.hello.open {
  left: 300px;
}

检查这个codepen