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

您好，我有一个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);

quote_form=document.getElementsByClassName（'quote-form'）[0]；
变量计时器=设置间隔（函数（）{
如果（！quote_form.style.opacity）{
quote_form.style.opacity=1；
}
如果（quote_form.style.opacity>0）{
quote_form.style.opacity-=0.1；
}否则{
清除间隔（计时器）；
quote_form.innerHTML='感谢您回答此平面设计报价问卷！您应该很快就会收到确认电子邮件
'
var timer2=设置间隔（函数（）{
如果（quote_form.style.opacity！=1）{
quote_form.style.opacity+=0.1；
}否则{
清除间隔（计时器2）；
}
}, 50);
}
}, 50);

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

---

非常感谢大家

您的问题在于类型

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

“0.1”+0.1

=

0.10.1

-这将中断您的时间间隔

您需要将“读取不透明度”值的值强制转换为浮点以更新它

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

功能演示：

对于一个简单的淡入淡出，我会使用平面css转换/关键帧和javascript作为触发器，但这两种方式都会对您有所帮助

更新：

非常简单的动画，仅使用css，并在需要动画时使用触发器添加类：

---

您的问题在于类型

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

“0.1”+0.1

=

0.10.1

-这将中断您的时间间隔

您需要将“读取不透明度”值的值强制转换为浮点以更新它

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

功能演示：

对于一个简单的淡入淡出，我会使用平面css转换/关键帧和javascript作为触发器，但这两种方式都会对您有所帮助

更新：

非常简单的动画，仅使用css，并在需要动画时使用触发器添加类：

---

如果你使用css的

@关键帧来制作animation@DostonbekOripjonov这是否允许我创建一个回调函数来设置.innerHTMLno。但是，只需使用
display:none
创建div，当用户执行操作时，我的意思是当您想要显示消息时，添加创建动画的类，如果您使用css的
@关键帧来创建animation@DostonbekOripjonov这是否允许我创建一个回调函数来设置.innerHTMLno。但是，只需使用
display:none
创建div，当用户执行操作时，我的意思是当您想显示消息时，添加制作动画的类谢谢！这有我一直在寻找的功能！如果我能用css实现更平稳的转换，我真的很感谢你给我指一些谷歌的文档或关键词。哈哈，对不起，我刚刚从jQuery过渡到vanilla JS，我过得很愉快：PI添加了一个css动画示例@salthat，非常感谢！非常感谢。这有我一直在寻找的功能！如果我能用css实现更平稳的转换，我真的很感谢你给我指一些谷歌的文档或关键词。哈哈，对不起，我刚刚从jQuery过渡到vanilla JS，我过得很愉快：PI添加了一个css动画示例@salthat，非常感谢！