CSS动画在IE11中无法正常工作

Question

我正在使用可在Safari，Chrome和Firefox中正常工作但在IE 11中无法正常工作的CSS动画。我无法真正发现我的代码有任何问题。你能告诉我问题在哪里吗？

我的指标通过点击事件从第一项移动到最后一项。

<div class="divWrapper"> 
    <div class="item-indicator move"></div> 
    <div class="item">1</div> 
    <div class="item">2</div> 
    <div class="item">3</div> 
      . 
      . 
      . 
    <div class="item">8</div> 
</div> 

.item-indicator { 
    position: absolute; 
    background-color: #000; 
    border-color: #000; 
    opacity: 0; 
    transition: opacity .25s; 
    -webkit-transition: opacity .25s; 
    right: 100%; 
} 

.move { 
    -webkit-transition: -webkit-transform .25s; 
    transition: transform .25s; 
    opacity: 1; 
    right: auto; 
} 

.divWrapper [data-position]{ 
    opacity: 1; 
    right: auto; 
} 

.divWrapper [data-position='1']{ 
    -webkit-transform: translateX(0); 
    -ms-transform: translateX(0px); 
    transform: translateX(0); 
} 

.divWrapper [data-position='2']{ 
    -webkit-transform: translateX(calc(100% + 4px)); 
    -ms-transform: translateX(calc(100% + 4px)); 
    transform: translateX(calc(100% + 4px)); 
} 

.divWrapper [data-position='3']{ 
    transform: translateX(calc(200% + 9px)); 
} 

Answer 1

你不能设置一个类只有不透明度过渡和转型只有在其他类变换（你可以，但他们会互相覆盖）。

尝试：

.item-indicator { 
    transition: all .25s; 
} 

.move { 
    /*transition: all .25s; -- not needed like this /* 
    transition: opacity .25s, transform .33s; 
} 

你.move过渡只是过渡转变，而不是不透明度，从.item指示器类，因为你overided过渡性质。