位置转换在 Edge 中不起作用

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 可能不支持 background-color 上的动画（它不支持 background-image）

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

另外，CSS transition 属性不需要 -moz-、-o- 和 -ms- 前缀。所以你可以删除那些。 http://shouldiprefix.com/#transitions .

我会link回答我的问题，对我的问题也许会有帮助。

Answer 2

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

这是 Edge 不喜欢的部分：

bottom: calc(50% - 30px);

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

位置转换在 Edge 中不起作用

Position transition not working in Edge

css

css-transitions

microsoft-edge