0
我正在尝试侧向切换 - 当用户单击它时,它会平滑地滑向右侧,当用户想要关闭它时,它会滑入左侧Sideway切换 - 向右滑动打开并向左滑动以关闭
我创建了我的JSFiddle,但我不确定如何在用户单击时将幻灯片集成到幻灯片中。 这里的生活:https://jsfiddle.net/gmf1sypw/
HTML:
<div class="wrapper">
<h3>Happening</h3>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aliquam deserunt harum rem earum assumenda perspiciatis expedita. Aliquid distinctio tenetur fugiat qui recusandae obcaecati voluptates.</p>
</div>
</div>
CSS:
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
margin-top: 50px;
}
.wrapper {
width: 100%;
min-height: 250px;
position: relative;
border: 2px solid orange;
border-left: 40px solid orange;
padding: 15px;
color: rgba(0, 0, 0, 0.5);
font-size: small;
display: inline-block;
}
.wrapper h3 {
font-size: 1rem;
color: white;
text-transform: uppercase;
letter-spacing: 3px;
position: absolute;
bottom: 0;
left: 0;
margin-left: -30px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
感谢您的解决方案。我不想隐藏整个事物,而只是希望内容被切换,并且标题发生的位置保持不变。 –
我更新了一个应该为你工作的小提琴。 – Mark
谢谢!一个问题:我如何确保橙色边框的整个盒子与内容一起滑动?所以它看起来像是在滑出和在? –