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

单击切换按钮时，我正在尝试执行移动转换。我设法使滑块转换为工作状态，但类中的文本

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

放在transition标记中，就会发生transition，但是在幻灯片上打开所有

p

文本进入滑块，并且没有文本被看到

我还尝试为

div.hello

创建另一个

transition

标记，如

。

，但它无法工作

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

---

文本没有设置动画，因为您没有设置任何转换属性，您只需添加以下内容：

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

---

选中此项

无需向元素添加

open

类

结合

v-if

和一些转换CSS类将完成所有工作。你看过报纸了吗？其中有一个例子可以满足您的需求，但不幸的是，它无法在我的真实代码中工作。在这里，我从

hello

类和aside类中删除了transition属性，但这里的transition有效，因为vue的transition指令。有没有根据标签名给出不同的幻灯片过渡值？@AvinashRaj您不能这样做，Vue的

组件用于有条件地显示/隐藏的内容（就像您的旁白，因为它有

v-if

），但它不适用于你的段落内容，因为它们需要始终显示出来。前面的方法更合适，只在转换组件中包装您的标签，并对

p

标签使用CSS转换属性。如果你能告诉我你想要什么样的行为，也许我能帮你更多。