我有一个简单的示例，其中单击按钮时图像淡入。我希望图像在 fadeIn-animation 完成后保留，并尝试使用 animation-fill-mode: forwards 这样做。但是，那是行不通的。如果能给我一个简短的提示，我将不胜感激。
这是我的代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animate.css!</title>
<link rel="stylesheet" href="animate.css">
</head>
<body>
<a href="#" class="button" id="first">Hola!</a>
<img src="tucan.png" id="tucan" alt="Tucan">
<style type="text/css">
body {
margin: 50px;
background: #2980b9;
font-family: sans-serif;
text-align: center;
}
a.button {
background:#e74c3c;
color: white;
padding: 20px;
text-decoration: none;
display: inline-block;
font-size: 50px;
border-radius: 10px;
}
#tucan {
opacity: 0;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var animationName = 'animated fadeIn';
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$(function(){
$('#first').on('click',function(){
$('#tucan').addClass(animationName).one(animationEnd, function (){
$(this).removeClass(animationName);
});
});
});
</script>
</body>
</html>
最佳答案
尝试使用这个
$('#first').on('click',function(){
$('#tucan').addClass(animationName).one(animationEnd, function (){
$(this).removeClass(animationName);
$(this).css( "opacity", 1 );
});
});
或者试试
$('#first').on('click',function(){
$('#tucan').addClass(animationName);
});
关于jquery - 如何将 animate.css 与 animation.fill.mode 一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38943846/