时间戳

首页 > 解决方案 > 仅在 javascript 中进行某些转换的转换

javascript - 仅在 javascript 中进行某些转换的转换

问题描述

我在这里有这段代码，我试图让火箭看起来飞过屏幕。我的图像是火箭朝上，所以我想将它旋转 x 度。但是，当我这样做时，它会在 5 秒内转换为 x 度，因为我设置了一个 transitionDuration。我不能在 css 中执行此代码，因为所有值都是在 javascript 中定义的，但是我怎样才能使转换持续时间只发生在 translateX 和 translateY 而不是旋转。

<img class = "image" id = "rocketImage" src = "rocketimage.png" alt = "rocket" width= "50px" height = "50px"> </img>


rocketImage.style.transform = "translateX(60px) translateY(60px) rotate(60deg)";
rocketImage.style.transitionDuration = "5s, 5s, 0s";

标签： javascripthtmlcss

解决方案

为了更精细地控制不同的变换，您可以使用关键帧动画，以所需的旋转启动火箭并随着时间的推移平移 x 和 y。

如果在关键帧中将 x、y 和 deg 的值定义为变量，则它们可以由 JavaScript 设置。

这是一个片段（注意：火箭显示 alt 文本，因为我没有火箭 png）。

let x = '60px';
let y = '60px';
let deg = '60deg';


const rocket = document.getElementById('rocketImage');
rocket.style.transform = 'rotate(' + deg + ')';

const root = document.documentElement;
 root.style.setProperty('--x', x);
 root.style.setProperty('--y', y);
 root.style.setProperty('--deg', deg);
 rocket.style.animation = 'rocket 5s 1 ease forwards';
@keyframes rocket {
  0% {
    transform: translateX(0) translateY(0) rotate(var(--deg));
  }
  100% {
    transform: translateX(var(--x)) translateY(var(--y)) rotate(var(--deg));
  }
}
<img class="image" id ="rocketImage" src="rocketimage.png" alt="rocket" width="50px" height="50px"> </img>

推荐阅读