Is there a way to have transition only on a single CSS change?-CodePudding

I want to rotate and move a square (<img>) to a specific mouse click on screen.

I want the rotation to happen instantly, but the movement happen linearly, over a duration of time (distance/speed).

However, I can't find a way to separate these two actions. I set the img rotation first and afterwards set it's style.left/top with a style.transitionDuration, but the rotation ends up with a duration as well.

Is there a way to only include the transitionDuration on the change of left and top, thus excluding it from the rotation?

CodePudding user response：

You can explicitly specify which properties to transition. If you want the rotation to be instant, just omit it from the transition:

document.querySelector('img')
  .addEventListener('click',
  ({target}) => target.classList.toggle('clicked')
);

img {
  top: 0;
  left: 0;
  position: absolute;
  transition: top 1s ease, left 1s ease;
}

.clicked {
  transform: rotate(90deg);
  left: 100px;
  top: 100px;
}

<img src="//placekitten.com/100" />

CodePudding user response：

You can do it with the transition property.

img.style.transition = 'top 1s linear, left 1s linear';

Now the only transitions applied are for both top and left.