我有 3 个列表项,每 3 秒向上旋转一次。我正在使用 transformY
属性来做这件事。问题是,当它到达最后一个元素时,它会循环返回,从而产生重新开始的效果。
如何通过在最后一项之后继续向上旋转来使这种效果看起来连续/无限?
setInterval(function() {
var currActiveItem = $('.list span').css('transform');
if (currActiveItem == "matrix(1, 0, 0, 1, 0, 0)") {
$('.list span').css('transform', 'translateY(-67px)');
} else if (currActiveItem == "matrix(1, 0, 0, 1, 0, -67)") {
$('.list span').css('transform', 'translateY(-134px)');
} else {
$('.list span').css('transform', 'translateY(0)');
}
}, 3000);
.transformed-z-0 {
transform: translateZ(0);
}
.list {
position: fixed;
overflow: hidden;
left: 0;
width: 100%;
height: 67px;
}
.list-item {
display: block;
height: 67px;
transition: all 0.7s ease-in-out;
transform: translateY(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h1 class="transformed-z-0">
<span class="list">
<span class="list-item">1</span>
<span class="list-item">2</span>
<span class="list-item">3</span>
</span>
<br> Some more text
</h1>
最佳答案
一种方法可以是:
- 克隆列表末尾的第一个元素(以获得正确的动画)
- 当你到达真正的第一个元素时禁用动画
- 按预期重启动画
var firstElem = $('.list span').first().clone();
$('.list').append(firstElem);
setInterval(function(){
var currActiveItem = $('.list span').css('transform');
if(currActiveItem == "matrix(1, 0, 0, 1, 0, 0)") {
$('.list span').removeClass('no-transition');
$('.list span').css('transform', 'translateY(-67px)');
}else if(currActiveItem == "matrix(1, 0, 0, 1, 0, -67)"){
$('.list span').css('transform', 'translateY(-134px)');
}else if(currActiveItem == "matrix(1, 0, 0, 1, 0, -134)"){
$('.list span').css('transform', 'translateY(-201px)');
}else {
$('.list span').addClass('no-transition');
$('.list span').css('transform', 'translateY(0)');
}
}, 3000);
.transformed-z-0 {
transform: translateZ(0);
}
.list {
position: fixed;
overflow: hidden;
left: 0;
width: 100%;
height: 67px;
}
.list-item {
display: block;
height: 67px;
transition: all 0.7s ease-in-out;
transform: translateY(0);
}
.no-transition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
<h1 class="transformed-z-0">
<span class="list">
<span class="list-item">1</span>
<span class="list-item">2</span>
<span class="list-item">3</span>
</span>
<br>
Some more text
</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
关于javascript - 如何使列表项滚动动画看起来连续/无限,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70850802/