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%);
  }
}

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

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

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

解决方法

我认为使用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 参数指定您希望动画播放多长时间。默认值为400ms。

easing 参数指定动画何时应以较慢的速度变快。例如，默认值为“ swing”，这意味着它将在开始和结束时变慢，在中间变快。也可以将其设置为“线性”，这表示动画速度在整个过程中保持恒定。

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

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

a-div

...然后就到了！快速回顾：

导入jQuery并使用.animate（）使生活更加轻松
$("#a-div").animate({left: "50vh"},700,"linear");和vw是相对于窗口大小的单位，因此它们对于您要执行的操作非常有用。

希望这对您有所帮助，并且编码愉快！：）

css-animations html