Переходы с флип-переходом не работают должным образом в IE

Question

Я сделал пример карточки с флип в 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); 
} 

Answer 1

У вас есть -webkit- также добавьте правило css для -ms-. Вы добавили эти правила для веб-браузеров, но не для браузеров, не являющихся веб-сайтами. Возьмите несколько своих правил 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; 
} 

Вы получаете идею :) Надеюсь, что это помогает!