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文本都会进入滑块，并且不会显示任何文本。

我还尝试为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

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

1 个答案: