如何解决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');
});
解决方法
我认为使用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
是相对于窗口大小的单位,因此它们对于您要执行的操作非常有用。
希望这对您有所帮助,并且编码愉快! :)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。