单击切换按钮时,我正在尝试进行移动过渡。我设法让转换工作为滑块,但类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过渡。
答案 0 :(得分:1)
由于您尚未设置任何转换属性,因此文本未设置动画,您只需添加以下内容:
.hello {
position: absolute;
left: 0;
color: white;
transition: all .3s ease;
}
.hello.open {
left: 300px;
}
选中此codepen