Question

隐藏和显示父元素后，子元素不再旋转（失去css3动画）。

删除父元素动画并进行隐藏/显示不会导致同样的问题（仅当父元素也有动画时才会出现此问题）

我在IE 11中测试。这是一个已知的问题吗？

以下是codepen中的代码段（在下面复制）http://codepen.io/agirma/pen/byIEd

/*-------- CSS start ---------*/
@-webkit-keyframes show_content {
    from {
        -webkit-transform: scale(0);
        opacity:0;
        transform: scale(0);
        opacity:0;
    }
    to {
        -webkit-transform: scale(1);
        opacity:1;
        transform: scale(1);
        opacity:1;
    }
}
@keyframes show_content {
    from {
        -webkit-transform: scale(0);
        opacity:0;
        transform: scale(0);
        opacity:0;
    }
    to {
        -webkit-transform: scale(1);
        opacity:1;
        transform: scale(1);
        opacity:1;
    }
}
@-webkit-keyframes rotate_content {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate_content {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
#parent {
    display:block;
    background:gray;
    width: 100px;
    height: 100px;
    padding: 20px;
    -webkit-animation: show_content 4s;
    -ms-animation: show_content 4s;
    amimation: show_content 4s;
}
#child {
    display:block;
    width:80px;
    height: 80px;
    border:solid 1px red;
    -webkit-animation: rotate_content 1s linear infinite;
    -ms-animation: rotate_content 1s linear infinite;
    amimation: rotate_content 1s linear infinite;
}

/*------------CSS end----------*/

<div id="parent">
    <div id="child"></div>
</div>
<button onclick="toggleVisibility()">toggle display</button>
<script>
    function toggleVisibility() {
        var div = document.getElementById('parent');
        div.style.display = div.style.display == 'none' ? 'block' : 'none';
    }
</script>

Answer 1

我不相信这个问题是已知的＃34;。几个星期前，我在IE测试网络应用程序时发现了自己。我今天终于开始关注它，并且在注意到你列出的相同条件后，我决定为IE提交错误报告。当我发现这个问题时，我正准备这样做。

我的错误报告： https://connect.microsoft.com/IE/feedbackdetail/view/941104/ie-11-bug-with-nested-css-animations-upon-display-of-previously-hidden-parent

<强>更新该漏洞由微软工程师成功复制，并将进行调查。

IE：当父级临时隐藏时，子元素会丢失动画

1 个答案: