javascript - 如何在淡出后立即淡入元素(普通/纯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 - 这会打破你的间隔

您需要将读取的不透明度值转换为 float 才能更新它

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/