我不知道如何使用JQuery,所以我需要一个只能使用JavaScript触发动画的方法。 当用户滚动页面时,我需要调用/触发CSS Animation。 请帮我解决这个问题。
<html>
<head>
<style>
*
{
margin:0px;
}
#logo
{
position:fixed;
top:200px;
height:200px;
width:1000px;
left:5%;
z-index:4;
opacity:0.8;
}
#earthlogo
{
position: fixed;
top:200px;
height:120px;
align-self: center;
left:5%;
margin-left: 870px;
margin-top: 60px;
z-index:4;
opacity: 0.9;
}
@keyframes anim
{
50%
{
filter:blur(10px);
transform: rotate(-15deg);
box-shadow:0px 0px 10px 3px;
}
100%
{
height:100px;
width:500px;
left:10px;
top:10px;
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.7);
background-color: rgba(0, 0, 1, 0.3);
opacity: 0.7;
}
}
@keyframes anim2
{
50%
{
filter:blur(40px);
transform: rotate(-15deg);
}
100%
{
height:60px;
width:60px;
left:10px;
top:10px;
margin-left: 435px;
margin-top: 30px;
opacity: 0.8;
}
}
body
{
height: 2000px;
}
#backstar
{
position:fixed;
width: 100%;
z-index: 1;
}
#earth
{
position: absolute;
width:100%;
z-index: 2;
top: 300px;
}
</style>
<script>
function start()
{
document.getElementById('logo').style.animation = "anim 2s 2s forward";
document.getElementById('earthlogo').style.animation = "anim2 2s 2s forward";
}
</head>
<body>
<img src="logo.png" id="logo" onclick="start();">
<img src="earthlogo.gif" id="earthlogo" onscroll="start();">
<img src="earth.png" id="earth">
<img src="stars.jpg" id="backstar">
</body>
答案 0 :(得分:8)
触发CSS动画的最简单方法是添加或删除类 - 如何使用纯Javascript执行此操作,您可以在此处阅读:
How do I add a class to a given element?
如果您使用jQuery(在基本用法中应该很容易学习),只需使用addClass
/ removeClass
即可。
然后你需要做的就是设置一个到这个给定元素的过渡:
.el {
width:10px;
transition: all 2s;
}
如果元素有一个类,则更改其状态:
.el.addedclass {
width:20px;
}
注意:此示例处于转换状态。但是对于动画来说它是一样的:只需在有一个类的元素上添加动画。
答案 1 :(得分:3)
这是使用香草JavaScript更改/触发与HTML元素关联的动画的方法。
首先,您可以使用CSS定义动画。
@keyframes spin1 { 100% { transform:rotate(360deg); } }
@keyframes spin2 { 100% { transform:rotate(-360deg); } }
@keyframes idle { 100% {} }
然后,您使用JavaScript在动画之间进行切换。
document.getElementByID('yourElement').style.animation="spin2 4s linear infinite";
注意:“ yourElement”是您希望的目标HTML元素 动画。
例如:<div id="yourElement"> ... </div>
答案 2 :(得分:2)
您可以使用CSS隐藏图像/动画,并在用户滚动时显示。这可以这样工作:
CSS:
div {
border: 1px solid black;
width: 200px;
height: 100px;
overflow: scroll;
}
#demo{
display: none;
}
HTML:
<div id="myDIV"> </div>
<div id="demo">
<img src="earthlogo.gif" id="earthlogo" alt="Thanks for scrolling. Now you see me">
</div>
你的javascript只需要包含一个eventListener来调用触发动画显示的函数。
JS:
document.getElementById("myDIV").addEventListener("scroll", start);
function start() {
document.getElementById('demo').style.display='block';
}
答案 3 :(得分:0)
这是主要代码:
HTML:
<img id="myImg">
CSS:
#myImg {
//properties
animation: animate 2s linear infinite //infinite is important!
}
@keyframes animate {
//animation base
}
JS:
document.getElementById("myImg").style.webkitAnimationPlayState = "paused";
window.addEventListener("scroll", function() {
document.getElementById("myImg").style.webkitAnimationPlayState = "running";
setTimeout(function() {
document.getElementById("myImg").style.webkitAnimationPlayState = "paused";
}, 2000);
});
答案 4 :(得分:0)
如果您想要动画,我建议您创建一个CSS类,并在条件条件JS上进行切换: CSS
.animation {
animation: anim 2s ease infinite;
transition: .2s
}
JS
// Select your Element
$element.document.querySelector(".yourElement");
$element.addEventListner('click', () => {
$element.classList.toggle("animation")
})
答案 5 :(得分:0)
我有类似的问题。 最好的答案对我来说不起作用,但是当我加上延迟后,它就起作用了。 以下是我的解决方法。
CSS
.circle_ani1,
.circle_ani2 {
animation-duration: 1s;
animation-iteration-count: 1;
}
.circle_ani1 {
animation-name: circle1;
}
.circle_ani2 {
animation-name: circle2;
}
JS
let temp_circle1 = $('.TimeCountdown_circle1').removeClass('circle_ani1');
let temp_circle2 = $('.TimeCountdown_circle2').removeClass('circle_ani2');
window.setTimeout(function() {
temp_circle1.addClass('circle_ani1');
temp_circle2.addClass('circle_ani2');
}, 50);
答案 6 :(得分:0)
在函数中无法添加和删除动画类。延迟简直是微不足道。根据{{3}}的建议,您可以请求浏览器进行重排,然后添加类。在这种情况下,延迟不是问题。因此,您可以使用以下代码:
element.classList.remove("animation")
element.ofsettWidth
element.classList.add("animation")
最好的是,它无处不在。所有的功劳都归功于这篇文章。
答案 7 :(得分:-1)
document.getElementById('logo').classList.add("anim");
document.getElementById('earthlogo').classList.add("anim2");