如何在淡出后立即淡入元素(香草/纯 javascript)

Question

你好，我有这个 ajax 表单，它返回一个控制"发送"动画的脚本。 但是，当淡入时，它会停止在 .1 不透明度处。我不确定脚本中出了什么问题。任何帮助将不胜感激。

quote_form = document.getElementsByClassName('quote-form')[0];
var timer = setInterval(function () {
if (!quote_form.style.opacity) {
quote_form.style.opacity = 1;
}
if (quote_form.style.opacity > 0) {
quote_form.style.opacity -= 0.1;
} else {
clearInterval(timer);
quote_form.innerHTML = '<p>Thank you for answering this graphic design quote questionnaire! You should receive a confirmation email shortly</p>'
var timer2 = setInterval(function () {
if (quote_form.style.opacity != 1){
quote_form.style.opacity += 0.1;
} else {
clearInterval(timer2);
}
}, 50);
}
}, 50);

控制台中不显示任何错误。您可以在此页面尝试代码：

https://tester.desertsunstudio.com/el-paso-graphic-design-quote-texas-southwest-united-states-web-developer-graphic-designer-desert-sun-studio

非常感谢你们！

Answer 1

你的问题是类型！

您正在将不透明度的字符串值与数字进行比较，并尝试连接这些值：

"0.1" + 0.1==0.10.1- 这将打破您的间隔

您需要将读取不透明度值的值强制转换为浮点数以对其进行更新

const styles = window.getComputedStyle(quote_form);
const opacity = parseFloat(styles.opacity);
// returns 0.1 not "0.1"

功能演示：http://jsfiddle.net/shannonhochkins/agq81svz/7/

对于简单的淡入和淡出，我将使用平面 css 过渡/关键帧和 javascript 作为触发器，但这应该对您有所帮助

更新：

非常简单的动画，只有 css 和一个触发器，用于在我们希望它进行动画处理时添加类：

http://jsfiddle.net/shannonhochkins/agq81svz/21/