Question

I'm attempting to recreate a CSS transition effect similar to this, only horizontal and with DIVs containing plain text (i.e. I don't it to be an image wiper). I am also unsure whether breaking the DIV out into multiple 'slots' as they do is necessary, e.g.:

<div id="slot" class="demo">
<div id="slot1" class="flipper">
<div class="outgoing"><img src="images/sample1.jpg" width="600" height="400" /></div>
<div class="incoming"><img src="images/sample2.jpg" width="600" height="400" /></div>
</div>
<div id="slot2" class="flipper">
<div class="outgoing"><img src="images/sample1.jpg" width="600" height="400" /></div>
<div class="incoming"><img src="images/sample2.jpg" width="600" height="400" /></div>
</div>
<div id="slot3" class="flipper">
<div class="outgoing"><img src="images/sample1.jpg" width="600" height="400" /></div>
<div class="incoming"><img src="images/sample2.jpg" width="600" height="400" /></div>
</div>
<div id="slot4" class="flipper">
<div class="outgoing"><img src="images/sample1.jpg" width="600" height="400" /></div>
<div class="incoming"><img src="images/sample2.jpg" width="600" height="400" /></div>
</div>
<div id="slot5" class="flipper">
<div class="outgoing"><img src="images/sample1.jpg" width="600" height="400" /></div>
<div class="incoming"><img src="images/sample2.jpg" width="600" height="400" /></div>
</div>
<div id="slot6" class="flipper">
<div class="outgoing"><img src="images/sample1.jpg" width="600" height="400" /></div>
<div class="incoming"><img src="images/sample2.jpg" width="600" height="400" /></div>
</div>
<div id="slot7" class="flipper">
<div class="outgoing"><img src="images/sample1.jpg" width="600" height="400" /></div>
<div class="incoming"><img src="images/sample2.jpg" width="600" height="400" /></div>
</div>
<div id="slot8" class="flipper">
<div class="outgoing"><img src="images/sample1.jpg" width="600" height="400" /></div>
<div class="incoming"><img src="images/sample2.jpg" width="600" height="400" /></div>
</div>
</div>

Even if the above is required, couldn't it be generated on the fly for the container? Not looking for a complete solution, but if anyone has created an effect similar to this or has seen something resembling it in the wild, I'd love to hear your thoughts or inspect a link. I originally thought this would be relatively simple, but it's giving me a lot more trouble than I anticipated.

Will update this post with a Fiddle when I make any significant headway. Also, CSS is preferred, but JavaScript (jQuery, GreenSock, whatever) is allowed.

Answer 1

尝试使用transition属性，:nth-child()选择器。请注意，可能需要在:nth-child()选择器处的索引处进行调整以对应transition持续时间，以在特定线路上实现预期的滑动效果

.s span {
  display:block;
  position:relative;
  width:50px;
  padding:0px;
  margin:0px;
  line-height:18px;
}

.s span:nth-child(2) {
  transition: all .5s;
}
.s span:nth-child(1), .s span:nth-child(10) {
  transition: all 3s;
}

.s span:nth-child(6) {
  transition: all 1s;
}

.s span:nth-child(even) {
  left:0px;
  color: skyblue;
  background: navy;
  opacity:1;
}

.s span:nth-child(odd) {
  left:-60px;
  color: navy;
  background: skyblue;
  opacity:0;
}

.s span:nth-child(1), .s span:nth-child(11) {
  transition: all 2.5s;
}

.s span:nth-child(5) {
  transition: all 1s;
}

.s span:nth-child(3), .s span:nth-child(7) {
  transition: all 5s;
}

.s span:nth-child(9) {
  transition: all 3.5s;
}

.s input[type="checkbox"]:checked ~ span:nth-child(even) {
   display:block;
   left: -60px;
   opacity:0;
}

.s input[type="checkbox"]:checked ~ span:nth-child(odd) {
   left:0px;
   display:block;
   opacity:1;
}

<div class="s">
  click <input type="checkbox" />
  <span>abc</span><span>def</span>
  <span>ghi</span><span>jkl</span>
  <span>mno</span><span>pqr</span>
  <span>stu</span><span>vwx</span>
  <span>y</span><span>z</span>
</div>

Answer 2

查看我的基本文字滑块

CodePen Demo

我使用SASS为每张幻灯片创建动态transition次。真正发生的是每个文本行（包含在p标记中）都会被CSS translateX转换属性以各种速度移动，并使用jQuery切换到下一张幻灯片。

如果你想要一个纯CSS解决方案，可能可以用animation keyframe循环完成。

该演示非常灵活，可以根据需要支持尽可能多的p个标签（使用flexbox）

请告诉我这是否是您正在寻找的内容！

＆＃13;

var i=0;
$("body").on('click', '#nextSlide', function() {
  i++;
  if(i == $('.slide').length) {
    $('.slide.active').removeClass('active out');
    $($('.slide')[0]).addClass('active');
    i=0;
  }
  else{
    $('.slide.active').addClass('out').next('.slide').addClass('active');
  }
});

＆＃13;

body {
  padding: 2em;
  font-family: Arial, sans-serif;
  text-align: center;
}

#nextSlide {
  padding: 1em;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  display: inline-block;
  margin: 2em auto;
  text-align: center;
  transition: .3s;
  border: 2px solid #000;
}
#nextSlide:hover {
  background: #CCC;
}

p {
  color: #FFF;
  font-weight: bold;
}

#textSlider {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
  background: #EEE;
  border: 2px solid #CCC;
}
#textSlider .slide {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 100%;
  position: absolute;
}
#textSlider .slide:nth-of-type(3n+1) p:nth-of-type(3n+1) {
  background: #046380;
}
#textSlider .slide:nth-of-type(3n+1) p:nth-of-type(3n+2) {
  background: #A7A37E;
}
#textSlider .slide:nth-of-type(3n+1) p:nth-of-type(3n+3) {
  background: #002F2F;
}
#textSlider .slide:nth-of-type(3n+2) p:nth-of-type(3n+1) {
  background: #8E2800;
}
#textSlider .slide:nth-of-type(3n+2) p:nth-of-type(3n+2) {
  background: #B64926;
}
#textSlider .slide:nth-of-type(3n+2) p:nth-of-type(3n+3) {
  background: #FFB03B;
}
#textSlider .slide:nth-of-type(3n+3) p:nth-of-type(3n+1) {
  background: #00A388;
}
#textSlider .slide:nth-of-type(3n+3) p:nth-of-type(3n+2) {
  background: #79BD8F;
}
#textSlider .slide:nth-of-type(3n+3) p:nth-of-type(3n+3) {
  background: #BEEB9F;
}
#textSlider .slide.active p {
  transform: translateX(0%);
}
#textSlider .slide.out p {
  transform: translateX(-100%);
}
#textSlider .slide p {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 0 0 2em;
  flex: 1;
  transform-origin: 0 0;
  transform: translateX(100%);
  transition: .3s;
}
#textSlider .slide p:nth-of-type(5n+1) {
  transition: 1s;
}
#textSlider .slide p:nth-of-type(5n+2) {
  transition: .5s;
}
#textSlider .slide p:nth-of-type(5n+3) {
  transition: 1.5s;
}
#textSlider .slide p:nth-of-type(5n+4) {
  transition: .75s;
}
#textSlider .slide p:nth-of-type(5n+5) {
  transition: 1.25s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- basic text slider by azizgfx@gmail.com -->
<!-- http://stackoverflow.com/questions/35168245/css-slice-slot-transition-effect-for-with-divs -->

<!-- emmet: #textSlider>.slide*3>p*3>lorem5 -->
<div id="textSlider">
  <div class="slide active">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Reprehenderit natus nostrum blanditiis sint?</p>
    <p>Corporis dolore, voluptas rerum doloremque?</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Dolorum, eaque eius placeat possimus.</p>
    <p>Cupiditate voluptates debitis vel nam.</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Autem dolores cupiditate, corrupti ullam!</p>
    <p>Vitae deleniti eveniet ex perferendis.</p>
    <p>Consectetur adipisicing elit.</p>
  </div>
</div>

<a href="#" id="nextSlide">Next Text Slide</a>

＆＃13;

Answer 3

不完全像你的例子，而是CSS中的简化版本，其中有一些JS用于＆＃39; next＆＃39;按钮。如果你只是想让它无限循环，可能是纯CSS。

Simple CSS Slider - horizontal version

Simple CSS Slider - vertical version

HTML

['paging']['next']

CSS - 参见示例 JS - 见例子

CSS slice/slot transition effect for/with DIVs

3 个答案: