CODEWITHSUNDEEP
cssinternet-explorercss-transitionsmicrosoft-edge
Jamie Barker
Jamie Barker

Reputation: 8246

Using cubic-bezier on a transform translate. IE Reverses the animation?

Below is my test code.

Basically the animation should start off fast and then come to a gradual halt. This works fine in Chrome for both directions, however Internet Explorer (11) seems to reverse the animation when you move the element in the opposite direction.

  1. Why is it doing this?
  2. Any ideas how I can fix it?

Code: https://jsfiddle.net/qv3syqe1/

$('#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>

Upvotes: 2

Views: 2164

Answers (1)

vals
vals

Reputation: 64164

Setting similars transitions (not reusing it) seems to solve the issue

$('#move').on('click', function() {
  $('.transform').toggleClass('in out')
});
.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%);
}
<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>

Upvotes: 2

Related Questions