卡片翻转过渡在 IE 中无法正常工作答案

【问题标题】：Card flip transitions not working properly in IE卡片翻转过渡在 IE 中无法正常工作
【发布时间】：2014-12-16 05:35:31
【问题描述】：

我在JSFiddle 中为 AngularJS 制作了一个卡片翻转示例。

它在 Chrome 中完美运行。它在 Firefox 中运行良好。它在 IE 中有点工作，但不正确。

一旦我删除透视 css 规则，它就可以完美运行（没有透视）。如果我添加 -webkit- 和 -ie- 规则，它仍然不起作用。这是我的错误吗？

我已使用 ng-enter 和 ng-leave 进行转换等。请查看 JSFiddle 以获取完整代码。

.serviceRoll{
    margin:32px;
    position: relative;
    height:150px;
    width:215px;
    perspective:800px;
}
.rollInner {
    background-color:lightgrey;
    padding-top:50px;
    height:100px;
    width:215px;
    text-align:center;
    font-size:2em;
    border-radius: 16px;
}
.roll {
    position: absolute;
}
.roll.ng-enter {
    -webkit-transition:0.25s ease all;
    transition:0.25s ease all;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    z-index: 1;
}
.roll.ng-enter.ng-enter-active {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s;
}
.roll.ng-leave {
    -webkit-transition:0.25s ease all;
    transition:0.25s ease all;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    z-index: -1;
}
.roll.ng-leave.ng-leave-active {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
}

【问题讨论】：

标签： javascript angularjs css css-transitions ng-animate

【解决方案1】：

你有 -webkit- 的地方也为 -ms- 添加了一个 css 规则。您已经为 webkit 浏览器添加了这些规则，但没有为非 webkit 浏览器添加这些规则。以您的一些 css 规则为例。像这样的 -

.roll.ng-enter {
    -webkit-transition:0.25s ease all;
    -ms-transition:0.25s ease all;
    transition:0.25s ease all;
    -ms-transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    z-index: 1;
}
.roll.ng-enter.ng-enter-active {
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transition-delay: 0.25s;
    -ms-transition-delay: 0.25s;
    transition-delay: 0.25s;
}
.roll.ng-leave {
    -webkit-transition:0.25s ease all;
    -ms-transition:0.25s ease all;
    transition:0.25s ease all;
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    z-index: -1;
}

你明白了 :) 希望这会有所帮助！

【讨论】：

我已经尝试过了。使用 ms 规则jsfiddle.net/n0m8d4zg/5。在 IE 中，转换进行到一半，然后变为空白，直到下一个 $interval。
这可能是一些事情 - 您使用的是最新版本的 IE 吗？如果您没有将正确的 doctype 声明作为文档的第一行，IE 将进入兼容模式，并且大多数功能将无法按预期工作。确保您有一个有效的文档类型（就可以了）并将添加到您的文档。跨度>
我在我的主项目中拥有所有这些，并且可能会包含在 JSFiddle 项目中，但仍然没有运气。我认为它是一个 IE 错误 - 通常。