Question

我在AngularJS的JSFiddle中为卡片翻转做了一个例子。

它在Chrome中完美运行。它在Firefox中运行正常。它在IE中有效，但不合适。

一旦我删除了透视css规则，它就能完美地工作（没有透视）。如果我添加-webkit-和-ie-规则，它仍然无效。这是我的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);
}

Answer 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;
}

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

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

1 个答案: