如何:在点击按钮后使用animation .css

我想使用animation .css文件动画运行后，我点击一个按钮，函数来写class的名称，但它没有工作

我已经链接了样式表:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" />和添加按钮<button class="btnForAnimation" onclick="myAniFunction">Click</button>+ Jquery，但没有使用。

<!DOCTYPE html>
<html>
<meta charset='utf8'>
<head>
<h1 class="animate__animated animate__bounceInLeft">An animated element</h1><--!animation occured when onload-->
<button onclick=myfunction >Click me</button>
<--!Also Include code.jquery.com's v4.1.1 jquery code lib-->
<script lang....>
function myAnifunction() { /* code for loading stylesheet but it will took long*/}
</script>
</head>
</html>

现在我希望当我点击按钮时动画出现

我可以直接使用动画，但我只想使用库

如果看不到源代码，就很难知道哪里做错了。但是，我可以告诉您，Document.write不用于设置类名。相反，您应该使用Element。班级名册API。

下面是一个你想要完成的工作示例。我选择而不是来使用jQuery，因为对于像你这样刚刚开始web开发的人来说，在处理库和框架之前，你应该专注于学习普通JavaScript的来龙去脉。

如果您对实现有任何疑问，请在下面的评论中提出。

// Select the h1 element from the DOM
const h1 = document.querySelector('h1')
// Select the first button element from
// the DOM with a class of 'btn'
const btn = document.querySelector('.btn')
// Listen to the click event.
// This is very similar to how you used "onclick=myfunction" but
// is grenerally considered the "better" way to do it for a number
// of reasons that are outside the scope of this question.
btn.addEventListener('click', function () {
// Remove the bounce class, if it exists.
h1.classList.remove('animate__bounceInLeft')

// Force the browser to recalculate the page styles
// because style updates are typically batched.
// Otherwise, it be like nothing happened because
// we're removing the class and then immediately adding
// it again.
h1.offsetWidth

// Finally, add the bounce class so the heading animates.
// If you only want the heading to animate the first time
// the button is clicked, and do nothing from then out, this
// is the only line that is needed in this function.
h1.classList.add('animate__bounceInLeft')
})

/* Styles for presentation only */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.btn {
width: 100px;
height: 40px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" rel="stylesheet"/>
<!--
Your question suggests that you didn't
want this to animate when the page loads.
As such, I've removed the `animate__bounceInLeft` class
which effectively removes the animation until we add it later
with JavaScript.

If I misunderstood you, simply add the class back and everything will continue to work.
-->
<h1 class="animate__animated">An animated element</h1>
<button class="btn">Click</button>

作为web开发的新手，我理解。这里的问题是，当您最初添加类时，一旦页面加载，它就会加到您所选择的元素中。解决方法是:单击按钮时才需要添加类。正如我所看到的，您还添加了一个函数。

<h1 class="animate__animated">An animated element</h1>
<button onclick=myfunction()>Click me</button>

如你所见，我移除了那个类。

function myfunction(){
const elementToAnimate = document.getElementsByTagName('h1')[0];
elementToAnimate.classList.add('animate__bounceInLeft');
}

我选择了你要添加类的元素，

下面是工作示例。

嗯，我能想到的最好的办法就是而不是默认为animate__animated animate__bounceInLeft类。

然后，作为下一步，添加以下JavaScript:

const btn = document.getElementByTagName("button");
btn.addEventListener("click", function() {
document.querySelector('h1').classList.add('animate__animated animate__bounceInLeft');
})

这将添加animate__animated animate__bounceInLeft类h1一旦按钮被点击。

现在h1有了使其动画的类名，动画将会发生。

我可以在你的代码中看到另一个错误，虽然不是一个严重的错误。

你的注释(在代码中)有以下语法:

<--!Also Include code.jquery.com's v4.1.1 jquery code lib-->

这是不正确且无效的HTML。应该是:

<!--Also Include code.jquery.com's v4.1.1 jquery code lib-->

希望我能帮上忙

相关内容

最新更新

热门标签：