CSS如果溢出則滾動/翻譯元素

[英]CSS scroll/translateY an element if it overflows


Is it possible to optionally "scroll" an element if it grows beyond its bounding-box size? That is, say I have a div with overflow: hidden and a list of items within, I'd like to have a looping animation which, over the course of the animation, displays all the items in the list, "scrolling" (translateY?) to the bottom and then back to the top. Here's my best attempt at an ascii art example:

如果元素超出其邊界框大小,是否可以選擇“滾動”元素?也就是說,假設我有一個帶溢出的div:隱藏和其中的項目列表,我想要一個循環動畫,在動畫過程中,它會顯示列表中的所有項目,“滾動”(translateY) ?)到底部然后回到頂部。這是我在ascii藝術示例中的最佳嘗試:

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

I don't know a lot about css, but I've been reading up on it and css animations. I'm wondering if there's a way to "conditionally" trigger such an animation? Or, would it be possible to write the animation in such a way that it could always be running and would just do the right thing even if the whole list was visible (that is, it was short enough that it was not overflowing), and then as the list grew, the effect of the animation would actually show up?

我不太了解css,但我一直在閱讀它和css動畫。我想知道是否有辦法“有條件地”觸發這樣的動畫?或者,是否可以以這樣的方式編寫動畫,即它可以始終在運行,即使整個列表都可見(也就是說,它足夠短以至於沒有溢出),它也會做正確的事情,並且隨着列表的增長,動畫的效果實際上會顯現出來?

EDIT: I should clarify I'd like to achieve a "scrolling"-style of animation, rather than just instantaneously replacing the elements that are visible.

編輯:我應該澄清我想要實現一種“滾動”式的動畫,而不是只是瞬間替換可見的元素。

2 个解决方案

#1


1  

Here's a pure CSS animation that I think does what you're looking for. Basically it uses Keyframes to scroll the #inner div using translateY inside the #outer div. At 50% we stop at 100% of the height of #inner (-101px so we don't scroll past the last item and it's margin), then at 100% you're back to the start. You can change the speed in which it animates in the #inner declaration.

這是一個純CSS動畫,我認為你正在尋找。基本上它使用Keyframes在#outer div中使用translateY滾動#inner div。在50%時我們停在#inner的高度的100%(-101px,所以我們不滾過最后一個項目和它的邊距),然后在100%你回到開始。您可以在#inner聲明中更改其動畫的速度。

By using calc and percents, this solution accommodates any number of slides without having to alter the CSS. Also by adding infinite to the animation declaration you can run the slide back and forth infinitely.

通過使用計算和百分比,此解決方案可以容納任意數量的幻燈片,而無需更改CSS。此外,通過向動畫聲明添加無限,您可以無限地來回運行幻燈片。

#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); }
}
<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>

#2


0  

Yes, I am not sure exactly how you are wanting the animation to look, but here is a vanilla JS/CSS slideshow animation. If you want it to slideUp/down you can simply modify the CSS animation so rather than changing display, it will change it's position by adding/subtracting a margin to the element.

是的,我不確定你想要動畫的樣子,但這里有一個vanilla JS / CSS幻燈片動畫。如果你想滑動上/下你可以簡單地修改CSS動畫,而不是改變顯示,它會通過向元素添加/減去邊距來改變它的位置。

//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";
}
<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>


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2017/10/16/7252091d4915ebbe8082db32b43c37cc.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com