Question

是否可以选择＆＃34;滚动＆＃34;一个元素，如果它超出其边界框大小？也就是说，假设我有一个overflow: hidden的div和一个项目列表，我希望有一个循环动画，在动画过程中，它会显示列表中的所有项目，＆＃34;滚动＆＃34; （translateY？）到底部然后回到顶部。这是我在ascii艺术范例中的最佳尝试：

                             AAAAAA                             
               AAAAAA        BBBBBB        AAAAAA               
+------+      +------+      +------+      +------+      +------+
|AAAAAA|      |BBBBBB|      |CCCCCC|      |BBBBBB|      |AAAAAA|
+------+  ->  +------+  ->  +------+  ->  +------+  ->  +------+
 BBBBBB        CCCCCC                      CCCCCC        BBBBBB 
 CCCCCC                                                  CCCCCC

我不太了解css，但我一直在阅读它和css动画。我想知道是否有办法有条件地＆＃34;触发这样的动画？或者，是否有可能以这样的方式编写动画，即它始终可以正常运行，即使整个列表都可见（也就是说，它足够短以至于它没有溢出），它也会做正确的事情，并且然后随着列表的增长，动画的效果实际上会出现？

编辑：我应该澄清一下，我想要实现一种动态的滚动动画，而不是只是瞬间替换可见的元素。

Answer 1

这是一个纯粹的CSS动画，我认为它会做你正在寻找的东西。基本上它使用Keyframes在#inner div内使用translateY滚动#outer div。在50％时，我们停在#inner高度的100％（-101px，因此我们不会滚过最后一个项目及其边距），然后是100％你是回到开始。您可以在#inner声明中更改其动画的速度。

通过使用calc和百分比，此解决方案可以容纳任意数量的幻灯片，而无需更改CSS。另外，通过向动画声明添加无限，您可以无限地来回运行幻灯片。

＆＃13;

#outer {
  overflow: hidden;
  width: 100px;
  min-height: 100px;
  height: 100px;
  }
  
#inner {
  height: auto;
  -webkit-animation: scrolly 10s infinite; /* Safari 4+ */
  -moz-animation: scrolly 10s infinite; /* Fx 5+ */
  -o-animation: scrolly 10s infinite; /* Opera 12+ */
  animation: scrolly 10s infinite; /* IE 10+, Fx 29+ */
}

#inner img {
 display: block;
 margin: 0 0 1px 0;
}


@-webkit-keyframes scrolly {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(calc(-100% + 101px)); }
  100% { transform: translateY(0px); }
}
@-moz-keyframes scrolly {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(calc(-100% + 101px)); }
  100% { transform: translateY(0px); }
}
@-o-keyframes scrolly {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(calc(-100% + 101px)); }
  100% { transform: translateY(0px); }
}
@keyframes scrolly {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(calc(-100% + 101px)); }
  100% { transform: translateY(0px); }
}

＆＃13;

<div id='outer'>
  <div id='inner'>
    <img src="http://placehold.it/100x100&text=A"/>
    <img src="http://placehold.it/100x100&text=B"/>
    <img src="http://placehold.it/100x100&text=C"/>
    <img src="http://placehold.it/100x100&text=D"/>
  </div>
</div>

＆＃13;

Answer 2

是的，我不确定你想要动画的样子，但这里有一个vanilla JS / CSS幻灯片动画。如果你想让它上下滑动你可以简单地修改CSS动画，而不是改变显示，它会通过向元素添加/减去边距来改变它的位置。

＆＃13;

//Changed index so 1 is actually first image, rather than starting at 0 index
var index = 1;
var paused = false;
var slideShow = [];

for (i=0; i<document.getElementsByClassName("slideShow").length; i++) {
  slideShow[i] = document.getElementsByClassName("slideShow")[i];
  slideShow[i].style.display = "none";
}

slideShow[0].style.display = "inline";

var slides = setInterval(function() {
  if (index < slideShow.length) {
    index++;
    showDivs();
  }
  else {
    index = 1;
    showDivs();
	}
},1000);

function control(n) {
  clearInterval(slides);

  if (index+n > slideShow.length) {
    index = 1;
  }
  else if (index+n <= 0) {
    index = slideShow.length;
  }
  else {
    index += n;
  }
  showDivs();
}

function showDivs() {
  //Hide all slideShow elements, and then show only the targeted element
  for (let i=1; i<=slideShow.length; i++) {
    slideShow[i-1].style.display = "none";
  }
  slideShow[index-1].style.display = "inline";
}

＆＃13;

<button  onclick="control(-1)" class="arrows" id="left"><</button>
<p class="slideShow">1</p>
<p class="slideShow">2</p>
<p class="slideShow">3</p>
<p class="slideShow">4</p>
<p class="slideShow">5</p>
<button onclick="control(1)" class="arrows" id="right">></button>

＆＃13;

CSS如果溢出则滚动/翻译元素

2 个答案: