Question

以下是我的测试代码。

基本上动画应该快速开始，然后逐渐停止。这在Chrome中适用于两个方向，但是当您向相反方向移动元素时，Internet Explorer（11）似乎会反转动画。

为什么要这样做？
我有什么想法可以解决它吗？

$('#move').on('click', function() {
  $('.transform').toggleClass('in out')
});

.transform {
  background: red;
  height: 100px;
  width: 100px;
}

.transform.in,
.transform.out {
  transition: transform 5s cubic-bezier(.19, 1, .22, 1);
}

.transform.in {
  transform: translateX(100%);
}

.transform.out {
  transform: translateX(0%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="transform out">

</div>
<button id="move">
  Move
</button>

Answer 1

设置类似物过渡（不重复使用）似乎解决了问题

＆＃13;

$('#move').on('click', function() {
  $('.transform').toggleClass('in out')
});

＆＃13;

.transform {
  background: red;
  height: 100px;
  width: 100px;
}

.transform.in {
  transition: transform 5s cubic-bezier(.18, 1, .22, 1); /* changed .19 to .18 */
}

.transform.out {
  transition: transform 5s cubic-bezier(.19, 1, .22, 1);
}

.transform.in {
  transform: translateX(100%);
}

.transform.out {
  transform: translateX(0%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="transform out">

</div>
<button id="move">
  Move
</button>

＆＃13;

在变换上使用cubic-bezier。 IE反转动画？

1 个答案: