Internet Explorer CSS 转换问题答案

【问题标题】：Internet Explorer CSS transition issueInternet Explorer CSS 转换问题
【发布时间】：2019-01-12 04:19:52
【问题描述】：

我有一些元素 width 在滚动时随着 JS 变为 0，当开始将 width 转换为 0 时，元素首先变得非常大，然后根据需要进行操作。在 Chrome 中一切正常。

这是https://jsfiddle.net/dx914ut0/的一个例子

我该怎么办？

UPD：只需要添加单位。

【问题讨论】：

标签： javascript html css internet-explorer

【解决方案1】：

尝试使用下面的代码，而不仅仅是转换。这将确保它适用于所有浏览器。

-webkit-transition: visibility 0s, opacity 2s ease-out;
-moz-transition: visibility 0s, opacity 2s ease-out;
-o-transition: visibility 0s, opacity 2s ease-out;
transition: visibility 0s, opacity 2s ease-out;

【讨论】：

但我需要为width属性设置动画
像这样使用宽度而不是可见性和不透明度：
-webkit-transition: width 2s ease-out;

【解决方案2】：

在你的 html 中尝试函数 onscroll：

<div onscroll="topFunction()" id="myBtn" title="Go to top"></div>

除非您希望在点击时发生这种情况，否则您可能应该添加 actionListiner 或其他东西。

【讨论】：