CODEWITHSUNDEEP
javascriptjquerycsscss-transitionscss-transforms
Sunny
Sunny

Reputation: 10075

How to stop transforms in a CSS transition

I have set a CSS transition like 

 transition: all 2s

Then I apply a CSS to change the transform like:

 transform: rotate(20deg);

Transition starts.

I want to stop it midway and have it stay there so I can then apply some other JS on it that is application dependent... what that is post-pausing is irrelevant to the question To test, I use:

 setTimeout(function() {
   ...
 }, 1000);

One crude way to stop the transition is to set CSS display to 'none'. Setting transform to 'none' or empty string does not work. The transition goes to the end for transform. Another trick of resetting the CSS to the current one, works for other properties but not for transforms. Setting transition property to none or empty string also does not stop the transition's transform.

Surely there must be some way.

Any suggestion? Preferrably in JQuery I do not want to use animation.

Upvotes: 2

Views: 3821

Answers (1)

Temani Afif
Temani Afif

Reputation: 272891

Why not using animation where you can easily manage the state:

$('button').eq(0).click(function() {
  $('.box').css('animation-play-state', 'paused');
});
$('button').eq(1).click(function() {
  $('.box').css('animation', 'none');
});
.box {
  margin: 50px;
  width: 100px;
  height: 100px;
  background: red;
  display:inline-block;
  vertical-align:top;
  animation: anime 10s forwards;
}

@keyframes anime {
  to {
    transform: rotate(180deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>
<button>Stop</button>
<button>Reset</button>

UPDATE

Here is a way that you can try with transition:

$('button').eq(0).click(function() {
  $('.box').addClass('rotate');
});
$('button').eq(1).click(function() {
  var e = $('.box').css('transform'); // get the current state
  $('.box').css('transform', e); //apply inline style to override the one defined in the class
});
.box {
  margin: 50px;
  width: 100px;
  height: 100px;
  background: red;
  display:inline-block;
  vertical-align:top;
  transition: all 10s;
}

.rotate {
  transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>
<button>start</button>
<button>stop</button>

Upvotes: 3

Related Questions