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

时间:2018-05-14 07:40:12

标签: javascript vue.js vuejs2

单击切换按钮时,我正在尝试进行移动过渡。我设法让转换工作为滑块,但类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

1 个答案:

答案 0 :(得分:1)

由于您尚未设置任何转换属性,因此文本未设置动画,您只需添加以下内容:

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

选中此codepen