AEJoy —— 表达式之仅限在某一维摆动【JS】

2023-09-19 08:23:00

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

wiggel() 的作用仅限于水平方向

想法

wiggle() 确实是一个非常方便的工具，但有时您希望对它有更多的控制。在本例中，我们希望在垂直方向上摆动元素，而不是水平方向。

实现

要仅在垂直方向上摆动元素，我们可以使用以下代码：

element.style.animation = 'wiggle-vertical 1s infinite';

其中 wiggle-vertical 是自定义动画的关键帧的名称。

关键帧

自定义动画的关键帧如下所示：

@keyframes wiggle-vertical {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px);
  }
}

效果

添加自定义动画后，元素将在垂直方向上摆动，而不是水平方向。

浏览器支持

自定义动画在所有现代浏览器中都受支持。

正文

引言

wiggle() 是一个方便的 JavaScript 函数，可用于轻松地为元素添加摆动动画。但是，默认情况下，wiggle() 仅在水平方向上摆动元素。在某些情况下，您可能希望仅在垂直方向上摆动元素。本文将向您展示如何使用自定义动画来实现此目的。

使用自定义动画

要创建仅在垂直方向上摆动的自定义动画，可以使用以下步骤：

创建一个新的 CSS 文件并将其链接到您的 HTML 文档。
在 CSS 文件中，创建以下关键帧规则：

@keyframes wiggle-vertical {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px);
  }
}

在您的 JavaScript 代码中，使用以下代码应用动画：

element.style.animation = 'wiggle-vertical 1s infinite';

其中 element 是您要应用动画的元素。

控制摆动

使用自定义动画，您可以控制摆动的幅度和速度。要增加摆动幅度，请增加 50% 处的 translateY 值。要增加摆动速度，请减少动画持续时间。

浏览器支持

自定义动画在所有现代浏览器中都受支持。

示例

以下是一个示例，演示如何仅在垂直方向上摆动元素：

<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="element"></div>

  <script>
    var element = document.getElementById('element');

    element.style.animation = 'wiggle-vertical 1s infinite';
  </script>
</body>
</html>