位置过渡不在边缘工作

Question

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

我只是在边缘进行了测试，背景工作正常，但底部的过渡不是。它只是立即改变。

我确实意识到翻译可能会起作用，但是我有兴趣知道在上，右，底部，左，左，左，左，左，左侧的定位不适用于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

我有相同的问题，并通过比较我们的代码来弄清楚了什么问题。

这是边缘不喜欢的部分：

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脉冲动画在IE和FF