Question

我使用的CSS动画在Safari，Chrome和Firefox中运行良好，但在IE 11中运行不正常。我无法在代码中找到任何问题。你能告诉我问题出在哪里吗？

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

<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-indicator类的过渡属性。

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

1 个答案: