jQuery - 设置和重置转换延迟

Question

• 我通过添加一个活动类来触发过渡动画。

在

• 动画结束时，我删除了活动类(在 延迟(，以便可以再次触发。

这在第一次迭代中效果很好，但后续迭代并单击close函数不会重置延迟计数。

超时计时器显然需要在每次单击时清除或重置，但我无法使其始终如一地工作。我一直在尝试使用clearTimeout()功能。

$("#btn").on('click', function() {
$("#msg").prop("class", "alert active");
removeActive();
});
function removeActive() {
$("#msg").on("transitionend", function() {
setTimeout(function() {
$("#msg").removeClass("active");
}, 3000)
});
}
$("#close").on("click", function() {
$("#msg").removeClass("active");
});

.alert {
position: fixed;
right: 20px;
bottom: -100px;
display: flex;
padding: 10px;
width: auto;
max-width: calc(100% - 40px);
background: #3dc0f1;
color: #fff;
transition: all ease-in-out 0.3s;
z-index: 10;
}
.alert.active {
bottom: 20px;
}
#msg-tx {
padding: 10px 20px 10px 10px;
}
#close {
display: flex;
align-items: center;
padding: 10px;
border-radius: 5px;
transition: all ease-in-out 0.3s;
cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" type="submit">Go</button>
<div id="msg" class="alert">
<p id="msg-tx">Hello There</p>
<div id="close">X</div>
</div>

多次单击"开始"按钮会导致超时不一致。

Answer 1

通过动画化另一个属性(在本例中为翻译(来依赖CSS延迟，并使jQuery代码更容易。

$("#btn").on('click', function() {
$("#msg").removeClass("active");
setTimeout(function() {      
$("#msg").addClass("active");
}, 200)
});
$("#close").on("click", function() {
$("#msg").removeClass("active");
});

.alert {
position: fixed;
right: 20px;
bottom: -100px;
display: flex;
padding: 10px;
width: auto;
max-width: calc(100% - 40px);
background: #3dc0f1;
color: #fff;
transition: all ease-in-out 0.2s;
z-index: 10;
}
.alert.active {
bottom: 20px;
transform:translateY(calc(100% + 40px));
transition: bottom ease-in-out 0.3s,transform 0.3s 3s;
}
#msg-tx {
padding: 10px 20px 10px 10px;
}
#close {
display: flex;
align-items: center;
padding: 10px;
border-radius: 5px;
transition: all ease-in-out 0.3s;
cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" type="submit">Go</button>
<div id="msg" class="alert">
<p id="msg-tx">Hello There</p>
<div id="close">X</div>
</div>

Answer 2

您可以创建一个变量来保持超时，并在设置新的超时时清除它。

例：

var timeout;
$("#btn").on('click', function() {
$("#msg").addClass("alert active");
removeActive();
});
function removeActive() {
$("#msg").on("transitionend", function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
$("#msg").removeClass("active");
}, 3000);
});
}
$("#close").on("click", function() {
$("#msg").removeClass("active");
});

.alert {
position: fixed;
right: 20px;
bottom: -100px;
display: flex;
padding: 10px;
width: auto;
max-width: calc(100% - 40px);
background: #3dc0f1;
color: #fff;
transition: all ease-in-out 0.3s;
z-index: 10;
}
.alert.active {
bottom: 20px;
}
#msg-tx {
padding: 10px 20px 10px 10px;
}
#close {
display: flex;
align-items: center;
padding: 10px;
border-radius: 5px;
transition: all ease-in-out 0.3s;
cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" type="submit">Go</button>
<div id="msg" class="alert">
<p id="msg-tx">Hello There</p>
<div id="close">X</div>
</div>

Answer 3

问题是超时正在transitionend上添加 - 删除它，一切正常(可能调整超时进行补偿(。

为什么会发生这种情况：请考虑：

1. 单击以添加类警报开始过渡
2. 过渡结束删除活动以开始将其移回
3. 过渡结束(下移(发生并再次启动超时
4. 单击以添加活动类
5. 上一个超时在完成向下移动(步骤 3(后 3 秒启动并删除活动，然后步骤 4 的 3 秒结束

$("#btn").off().on('click', function() {
$("#msg").prop("class", "alert active");
removeActive();
});
function removeActive() {
//$("#msg").off().on("transitionend", function() {
setTimeout(function() {
$("#msg").removeClass("active");
}, 3000)
//});
}
$("#close").off().on("click", function() {
$("#msg").removeClass("active");
});

.alert {
position: fixed;
right: 20px;
bottom: -100px;
display: flex;
padding: 10px;
width: auto;
max-width: calc(100% - 40px);
background: #3dc0f1;
color: #fff;
z-index: 10;
transition: all ease-in-out 0.3s;
}
.alert.active {
bottom: 20px;
}
#msg-tx {
padding: 10px 20px 10px 10px;
}
#close {
display: flex;
align-items: center;
padding: 10px;
border-radius: 5px;
transition: all ease-in-out 0.3s;
cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" type="submit">Go</button>
<div id="msg" class="alert">
<p id="msg-tx">Hello There</p>
<div id="close">X</div>
</div>

选择：

• 删除 setTimeout 中的转换结束处理程序
• 使用 .once 而不是 .on(如果在完成之前单击可能会遇到类似的问题(