IE 10 的 CSS 过渡答案

【问题标题】：CSS transition with IE 10IE 10 的 CSS 过渡
【发布时间】：2016-01-29 23:51:23
【问题描述】：

所以我有这个在 Firefox 和 Chrome（最新版本）中运行良好的小 CSS 过渡。但是，它在 IE 10 中看起来像垃圾（无法正确呈现）。我想知道是否有一些 hack 让它像在其他浏览器中一样显示。

这里是pen on codepen 的链接（在 IE 10 中查看）。在 Chrome 或 Firefox 中运行良好。

我在这里包含了所有代码，因为我知道有些人讨厌它不在问题中。但在笔中都是可见的。以任何方式了解我如何解决这个问题都会很棒。

CSS：

#menu-icon {
    border-radius: 0.2em;
    display: block;
    color: white;
    font-size: 4em;
    font-weight: 900;
    width: 1.5em;
    background: grey;
    letter-spacing: -0.17em;
    line-height: 0.4em;
    position: absolute;
    bottom: 8em;
    left: 4em;
    height: 1.4em;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
}

#menu-icon span {
    display: inline-block;
    padding: 0px;
    margin: 0px;
}

.menu-bar {
    top: -0.4em;
    position: relative;
    width: 90%;
    margin-left: 0%;
    margin-right: 10%;
}

.menu .bar-left {
            transition:         transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;
}

.menu .bar-right {
            transition:         transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;
}

.arrow .bar-left {
    height: 0.3em;

    -webkit-transform: translate(0.34em, 0.05em) rotate(35deg);
       -moz-transform: translate(0.34em, 0.05em) rotate(35deg);
            transform: translate(0.34em, 0.05em) rotate(35deg);

            transition:         transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;

            transform-origin: center center;
    -webkit-transform-origin: center center;
}

.arrow .bar-right {
    height: 0.3em;
    -webkit-transform: translate(-0.34em, 0.15em) rotate(-35deg);
       -moz-transform: translate(-0.34em, 0.15em) rotate(-35deg);
            transform: translate(-0.34em, 0.15em) rotate(-35deg);

            transition:         transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;

            transform-origin: center center;
    -webkit-transform-origin: center center;
}

HTML：

<div id="menu-icon" >
    <div class="menu-bar">
        <span class="bar-left ">_</span>
        <span class="bar-right ">_</span>
    </div>
    <div class="menu-bar">
        <span class="bar-left ">_</span>
        <span class="bar-right ">_</span>
    </div>
    <div class="menu-bar">
        <span class="bar-left ">_</span>
        <span class="bar-right ">_</span>
    </div>
</div>

JS：

function init() {
    var menu = document.getElementById("menu-icon");
    if(menu.addEventListener) {
        menu.addEventListener("click", function() { 
            if(menu.className=="arrow") {
                menu.className = "menu";
            } else {
                menu.className = "arrow";
            }
        }, false);
    } else if(menu.attachEvent) {
        menu.attachEvent("onclick", function() {
            if(menu.className=="arrow"){
                menu.className = "menu";
            }else{
                menu.className = "arrow";
            }
        });
    }
};
if(window.addEventListener) {
    window.addEventListener("load", init, false);
} else if(window.attachEvent) {
    window.attachEvent("onload", init);
} else {
    document.addEventListener("load", init, false);
}

【问题讨论】：

附注：always put non-prefixed properties after prefixed version.
我制作了另一支笔 (click) 并更正了供应商前缀属性的顺序并稍微清理了您的 css 规则。您能否转到 IE10，打开开发工具（按 F12）并检查您的菜单元素。如果我检查元素，动画看起来不错。奇怪。
@kleinfreund 嘿，谢谢，我在检查元素和定期查看时看起来仍然一样
@brendosthoughts 你为什么不用大写？？？你这个懒惰的人，我必须为你解决这个问题！

标签： html css css-transitions internet-explorer-10

【解决方案1】：

这与其说是“为什么”会发生这种情况的答案，不如说是一种处理方法......这个问题的真正答案只是 Internet Explorer 很糟糕。

相反，作为一种解决方法，IE 似乎比处理文本更好地处理其他元素上的动画。所以，我的建议是去掉跨度中的下划线，只需设置 span 元素的样式以使其看起来相同。我已经制作了你的笔的修改版本以显示它在使用中（代码可能有点混乱，因为我只是从你所拥有的东西中破解了它，所以请记住那里还有改进的空间）

http://codepen.io/anon/pen/DGnwt

【讨论】：

太棒了！ ...我从来没有想过如果这是一种解决方法，它可以完美地工作，非常感谢！

【解决方案2】：

使用供应商前缀：

-ms-

例子：

-ms-transform: translate(0.34em, 0.05em) rotate(35deg);

您可以在此处找到有关供应商前缀的更多信息： http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm

但更好的解决方案是删除 CSS 中的所有前缀。示例，仅使用此：

transform: translate(0.34em, 0.05em) rotate(35deg);

然后转到此页面，http://modernizr.com/ 点击生产并检查您使用的所有功能，它会为您添加必要的带前缀的 CSS 行，以支持多种浏览器。下载它。放进去

<head></head>

就像一个 Javascript 文件。

你也可以使用这个：http://leaverou.github.io/prefixfree/

【讨论】：

嘿，感谢您的输入有问题的组件是一个更大的库的一部分，其中包含modernizer.js（完整的开发包）并且仍然具有相同的结果