Question

我的转换功能与我在Chrome上的预期相同，但它在Firefox上根本不起作用。

老实说，我认为我错误地理解了某些东西，并且因为某种错误或非预期的行为而对Chrome有效。

这是CSS规则（基于bootstrap 3警报类）：

.alert {
  transition: opacity 1s ease 5s;
  -webkit-transition: opacity 1s ease 5s;
  -moz-transition: opacity 1s ease 5s;
  opacity: 0;
}

我期望的是，当页面加载时，警报是可见的，并且在指定的超时后它会淡出，这正是在chorme上发生的事情。但是在Firefox上，它直接显示为不透明度为0，这与我想要的相反。

提前致谢。

Answer 1

您需要将转换为。目前，您的初始状态（基于您已共享的代码）为opacity:0;。您希望元素在加载时具有opacity:1;，然后将转换为 opacity:0;。

你可以通过在5秒后用JS添加一个类来完成这个，并且新类有opacity:0，但是你没有使用纯CSS。

也许更好的选择是使用CSS动画。但是，您必须改变解决问题的方式。常规CSS加载状态为opacity:0;，但您在加载时使用动画将不透明度更改为1，然后等待5秒，并将不透明度淡化为{{1 }}。整个动画将持续6秒，如果您使用百分比来设置动画的时间，则您希望以83.33％（总持续时间的5/6）开始淡出。

纯CSS自动淡出不适用于Firefox

1 个答案: