提个问题 #1
Comments
|
@nicewahson 不是很明白这个意思哈~ 能不能提供一段完整的 demo ？ |
|
@mqyqingfeng 冴老师，帮我看一下，接收我的双膝。 |
|
@nicewahson 我试了一下，可以写成这样 ul1.style.transition = "none";
ul1.style.left = 0 +'px'
setTimeout(function(){
ul1.style.transition = "all 1s";
}, 0)但是这样从第 4 张图到第 1 张图就会是直接变化 |
|
@mqyqingfeng 是的。这种我之前试过，按照想法，先去掉过渡，然后归0，因为有了延迟，所以应该会是先reflow，但是实际上不行，最后一张到第一张时候还是先把过渡效果的给加上去了。我看到网上有的说法是浏览器会合并渲染，所以 说起来 这种reflow的时机，和js执行的时机，怎么解决呢 |
|
@nicewahson 我在 Chrome 试了一下，这个是可以的，只是会在一遍或者几遍循环过后，又会变成过渡的样子，后来，我又把时间从 0 改成了 10，即 setTimeout(function(){
ul1.style.transition = "all 1s";
}, 10)大多数时候都是可以的，但是不知道在多少遍循环之后，有可能还是会变成过渡的样子。 合并渲染的解释我也看到了，表明即便设置了 setTimeout，不知道因为什么原因，还是有可能会变成合并渲染。 最后，我自己写了一个 demo，将 setInterval 改成了 setTimeout，利用 div1.style.transition = 'none'
div1.style.left=0
div1.style.transition = 'all 0.3s'第三个 transition 会覆盖第一个 transiton 的特性写了一个 demo, 是可以实现无过渡到第一张的。 |
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<style>
body {
background-color: #ccc;
}
#container {
width: 300px;
height: 200px;
overflow:hidden;
position:relative;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
}
#list {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
left: 0px;
top: 0;
width: 3000%;
height: 200px;
/*transition: all 1s;*/
}
#list li {
width: 300px;
height: 200px;
float: left;
}
.img {
width: 100%;
height: 100%;
}
.img1 {
background-color: #1abc9c;
}
.img2 {
background-color: #2ecc71;
}
.img3 {
background-color: #3498db;
}
.img4 {
background-color: #e67e22;
}
</style>
</head>
<body>
<div id="container">
<ul id="list">
<li><div class="img img1"></div></li>
<li><div class="img img2"></div></li>
<li><div class="img img3"></div></li>
<li><div class="img img4"></div></li>
</ul>
</div>
<script>
var index = 0;
var list = document.getElementById("list");
function next(index) {
list.style.transition = "all 1s"
if (index > 3) {
index = 0;
list.style.transition = "none";
}
list.style.left = -index * 300 + 'px';
setTimeout(next, 1000, ++index)
}
setTimeout(next, 1000, ++index)
</script>
</body>
</html> |
|
@mqyqingfeng 这样的写法虽然是少了很多，可是效果还是有些瑕疵。我是想要在最后一张到第一张仍然有过渡，所以我才复制了一份ul，但是在拉回到初始位置的时候 出了现在的问题。 |
|
@nicewahson 这是个 demo ，演示如何解决过渡的问题。你最终还是想要实现无缝轮播的功能，然而，无论是使用复制 ul 还是 删除前面的节点 append 到后面，处理起来都会很繁琐，我的建议还是使用 js 来做动画，当然如果你非要用 transition，我有一个建议，可以使用 transitionend 事件监听动画结束。 |
|
我又写了一个 demo，在上面例子的基础上进行了改动，添加了 transitionend 事件，算是示意，更多的功能还需要你自己添加啦~ <!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<style>
body {
background-color: #ccc;
}
#container {width: 300px; height: 200px; overflow:hidden; position:relative; margin-top: 200px; margin-left: auto; margin-right: auto; }
#list {list-style-type: none; margin: 0; padding: 0; position: absolute; left: 0px; top: 0; width: 3000%; height: 200px; transition: all 1s; }
#list li {width: 300px; height: 200px; float: left; }
.img {width: 100%; height: 100%; font-size: 50px; color: #fff; text-align: center; line-height: 200px; }
.img1 {background-color: #1abc9c; } .img2 {background-color: #2ecc71; } .img3 {background-color: #3498db; } .img4 {background-color: #e67e22; } </style>
</head>
<body>
<div id="container">
<ul id="list">
<li><div class="img img1">1</div></li>
<li><div class="img img2">2</div></li>
<li><div class="img img3">3</div></li>
<li><div class="img img4">4</div></li>
<li><div class="img img1">1</div></li>
</ul>
</div>
<script>
var index = 0;
var list = document.getElementById("list");
function next() {
list.style.transition = 'all 1s'
list.style.left = - (300 * ++index) + 'px'
setTimeout(next, 2000)
}
list.addEventListener("transitionend", function(){
if (index == 4) {
index = 0;
list.style.transition = 'none'
list.style.left = 0 + 'px';
}
});
setTimeout(next, 2000, index)
</script>
</body>
</html> |
|
效果图如下：
|
|
@mqyqingfeng 冴总很强。3q |
|
冴羽啥时候写个轮播图的轮子啊,坐等。。。 |
冴老师，提个问题。如果页面在js代码里操作会引起reflow的属性，怎么才能保证它之后的代码不受影响？比如说是这样的
我想要在left由1000px到0的变换过程没有过渡，等结束了再把过渡效果加上，好像是不行？在1000到0的过程始终都有渐变的情况
The text was updated successfully, but these errors were encountered: