如何在淡出后立即淡入元素（香草/纯 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/