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

Question

你好，我有这个 ajax 表单，它返回一个控制“发送”动画的脚本。然而，当淡入开始时，它会以 0.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/