Question

所以我在一个元素上有一个动画，它会改变背景颜色，并将底部位置从父级的垂直中心改为底部。

我刚刚在Edge做了一个测试，背景工作正常，但底部转换不是。它只会立即改变。

我确实认为翻译可能会有效，但我有兴趣了解更好的位置，因为在顶部，右侧，底部，左侧不适用于Microsoft浏览器中的过渡？它在Firefox，Chrome和Safari中运行得非常好。

我的CSS如下所示。

.heading-bg{
    display: table;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    bottom: calc(50% - 30px);

    -webkit-transition: bottom .5s ease-out, background-color .4s ease-out;
    -moz-transition: bottom .5s ease-out, background-color .4s ease-out;
    -ms-transition: bottom .5s ease-out, background-color .4s ease-out;
    -o-transition: bottom .5s ease-out, background-color .4s ease-out;
    transition: bottom .5s ease-out, background-color .4s ease-out;
}

.gallery-item:hover .heading-bg{
    bottom: 0px;
    background-color: rgba(0,0,0,0.7);

    -webkit-transition: bottom .6s ease-out, background-color .4s ease-out;
    -moz-transition: bottom .6s ease-out, background-color .4s ease-out;
    -ms-transition: bottom .6s ease-out, background-color .4s ease-out;
    -o-transition: bottom .6s ease-out, background-color .4s ease-out;
    transition: bottom .6s ease-out, background-color .4s ease-out;
}

标记：

<div class="gallery-item">
    <a href="www.example.com">
        <div class="gallery-item-inner">
            <div class="heading-bg">
                <h3>Gallery name</h3>
            </div>
        </div>
    </a>
</div>

.gallery-item有一个固定的高度

Answer 1

我遇到了同样的问题，并通过比较我们的代码设法找出了什么问题。

以下是Edge不喜欢的部分：

bottom: calc(50% - 30px);

当前Edge（EdgeHTML v14.14393）与calc（）结合使用时似乎不支持转换。

Answer 2

所以我以前遇到过类似的问题。 Edge可能不支持background-color上的动画（background-image不适合我）

我建议使用@keyframe这就是我解决问题的方法。

此外，您不需要CSS transition属性的-moz-， - o-和-ms-前缀。所以你可以删除它们。 http://shouldiprefix.com/#transitions。

我会将我的问题与答案联系起来，在我的问题上也许会有所帮助。 CSS3 pulse animation not working in IE and FF

位置转换无法在Edge中运行

2 个答案: