时间戳

首页 > 解决方案 > CSS动画在完成后响应

html - CSS动画在完成后响应

问题描述

我希望我的动画在屏幕变小时时响应高度。到目前为止，我让它与屏幕的宽度而不是高度一起工作。即使屏幕最小化，我也希望圆圈在动画后保持在屏幕顶部。当我现在把它变小时，它会让我滚动查看它。我将在底部附上我的代码。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="ballcopy.css">
  <meta name="veiwport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <main>
    <div class>
      <img src="image/Drizzy.jpg" alt="happy day's logo" class="logo">
    </div>
  </main>
  <script src="ball.js"></script>
</body>
</html>

CSS

*,*::after,*::before {
     box-sizing: inherit;
     }

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}


.logo {
  width: 100px;
  height: 100px;
  border-radius: 0;
  position: absolute;
  bottom: 0%;
  left: calc(50% - 50px);
  animation: rise;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}


.logo.click {
  animation: top;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes rise {
  0% {
    border-radius: 50%;
  }
  100% {
    border-radius: 50%;
    transform: translateY(-300%);
  }
}

@keyframes top {
  0% {
    border-radius: 50%;
    transform: translateY(-300%);
  }
  100% {
    border-radius: 50%;
    transform: translateY(-590%);
  }
}

JS

let logo = document.getElementsByClassName("logo");

logo[0].addEventListener('click', (event) => {

    logo[0].classList.add('click');
});

标签： htmlcsscss-animations

解决方案

我认为使用 jQuery 为这类东西制作动画更容易。jQuery 是一个外部 API，这些词真的很花哨，但只是将 jQuery 视为在 javascript 中编写通用代码的一种速记方式。

要将其导入您的文件，请添加...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

...进入主 HTML 文件的头部。确保在链接到您的 javascript 文件“ball.js”之前输入此代码，否则它不会将 jQuery 导入您的 javascript 文件。

使用 jQuery 编码时，您输入的第一件事始终是$. 这只是说“嘿，这行代码将使用 jQuery，而不是普通的普通旧 javascript”。然后使用标识符来选择要更改的元素。例如...

$("#someId")

这将选择 id 为“someId”的元素。但我们实际上必须对它做一些事情。jQuery 有一个很棒的方法，叫做.animate(*style*, *time*, *easing*, *do-after*);. 样式指定要将元素更改为的内容。所以，你可能会说{top: 20vh}。

vh代表视口高度，vw代表视口宽度。它们对于制作响应式网页非常有用。无论屏幕的尺寸/分辨率如何，始终处于100vh网页的高度并始终处于其宽度。100vw超级好用！

接下来的三个参数是可选的。time参数指定动画需要多长时间。默认为 400 毫秒。

easing参数指定动画何时应该更快更慢。例如，默认为“swing”，这意味着它会在开始和结束时变慢，在中间变快。它也可以设置为“线性”，这意味着动画速度始终保持不变。

最后，do-after参数允许您指定在动画之后执行的函数。

让我们创建一个示例。假设您想制作一个<div>id 为a-div从左上角水平移动到屏幕中间的 id。假设您希望它花费 700 毫秒，并且您希望它以恒定的速度发生，并且您不希望之后执行任何功能。我们将在 javascript/jQuery 中编写以下代码...

$("#a-div").animate({left: "50vh"}, 700, "linear");

......你去吧！快速回顾：

  • 导入 jQuery 并使用 .animate() 让生活变得更轻松
  • vw并且vh是相对于窗口大小的单位，因此它们对于您想要做的事情非常有用。

希望这对编码有所帮助和快乐！:)

推荐阅读