javascript - Vuejs 转换仅在幻灯片打开时发生

Question

单击切换按钮时，我正在尝试进行移动转换。我设法让转换为滑块工作，但类内的文本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文本都会进入滑块并且没有文本可见。

我也尝试为like创建另一个transition标签，但它无法正常工作。div.hello<transition name="cslide"><div class="hello">..

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

密码笔

标签： javascriptvue.jsvuejs2

Answer 1

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

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

检查这个代码笔