我正在尝试使用 CSS 和 Javascript 创建辐射圈效果。我的想法是每隔一段时间创建一个新的圆圈副本,然后在几秒钟后将其删除。
它在几秒钟内运行良好,但随后似乎圆圈被移除得太快了,因为它们不会辐射超过片刻。
这是怎么回事?有没有更好的方法来实现前几秒的效果?
CSS
.circle {
width: 300px;
height: 300px;
border-radius: 50%;
border: 3px solid #000;
-webkit-transition: all 2s linear;
-webkit-transform: scale(0.1);
position: absolute;
top: 0;
left: 0;
}
.circle.zoom {
opacity: 0;
-webkit-transform: none;
}
Javascript
counter = 0;
function createCircle(){
// Circle ID
var circleID = "circle_" + counter;
// Add circle to document
$("body").append("<div class='circle' id='" + circleID + "'></div>");
$thisCircle = $("#" + circleID);
// add "zoom" class
setTimeout(function(){
$thisCircle.addClass("zoom");
},10);
// Remove circle
setTimeout(function(){
$thisCircle.remove();
},3000);
counter++;
}
setInterval(function(){
createCircle();
},500);
JSFiddle 演示:http://jsfiddle.net/YaKBH/9/
最佳答案
您忘记将 $thisCircle
变量设为闭包作用域的局部变量,它是一个隐式全局变量。 3 秒后,它将开始删除当前圆圈(已动画 500 毫秒)。圆圈 0 到 4 将保留在 DOM 中,opacity: 0
。
要解决这个问题,只需添加另一个 var
keyword :
var $thisCircle = $("#" + circleID);
( updated demo )
顺便说一句,您可以省略 counter
变量并直接引用刚刚创建的元素:
setInterval(function createCircle() {
var $thisCircle = $("<div class='circle'></div>").appendTo("body");
// add "zoom" class with minimal delay so the transition starts
setTimeout(function () {
$thisCircle.addClass("zoom");
}, 0);
// Remove circle
setTimeout(function () {
$thisCircle.remove();
}, 3000);
}, 500);
( demo )
关于javascript - 使用 CSS 和 Javascript 实现辐射圈效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18707954/