多次旋转和缩放过渡不起作用-解网

问：

我想在发生特定触发器时应用旋转和缩小以及图像旋转状态之间的过渡。缩小和缩小应在旋转过程中发生。

button.addEventListener('click', function() {
  image.style.transform = 'scale(4) rotate(' + ja + 'deg) scale(0.25)';
  image.style.transition = 'transform 2s ease-in-out';
  ja+=90;
});

此代码适用于第一个转换，但不适用于任何其他转换。

我见过一些带有状态或@keyframe的代码，但它们都不适用于这种简单的情况。

javascript css css-过渡

document.querySelector('button').addEventListener('click', () => {
  const imgWrapp = document.querySelector('.img-wrapp');
  if ( imgWrapp.classList.contains('animated') ) {
    return;
  }
  imgWrapp.style.setProperty( '--rotate', Number( getComputedStyle(imgWrapp).getPropertyValue('--rotate') ) + 90 );
  imgWrapp.classList.add('animated');
  setTimeout( () => imgWrapp.classList.remove('animated'), 2000 );
});

.img-wrapp {
  --rotate: 0;
  display: inline-block;
  transition: transform 2s;
  transform: rotate(calc(var(--rotate) * 1deg));
}

.img-wrapp.animated img {
  animation: rotate 2s both;
}

@keyframes rotate {
  33.333% {
    transform: scale(4);
  }
  66.666% {
    transform: scale(.25);
  }
}

<button>Turn the image</button>
<div class="img-wrapp">
  <img src="http://i.imgur.com/8kGmXwB.png" alt="Light Bulb">
</div>

上一个：如何在 ChakraUI 中向 Flex box 添加过渡

下一个：在 <CSSTransition /> 中包装组件会有什么副作用吗？

多次旋转和缩放过渡不起作用

Multiple rotate and scale transition not working

评论