CSS / jQuery动画不触发
[英]CSS/jQuery animation not triggering
问题描述
I'm trying to use an animation, triggered by changing the class in jQuery on page load. 
我正在尝试使用动画，该动画通过在页面加载时更改jQuery中的类来触发。 It currently isn't doing anything. 目前它什么也没做。 I'm unsure of what is going wrong, although I'm pretty sure it's something wrong with the CSS. 我不确定出现了什么问题，尽管我很确定CSS出了点问题。 Here's my code: 这是我的代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Page 2</title>
<style type="text/css">
/* Your styles go here */
img {width:200px; height:100px; animation-name: widthChange; animation-duration: 3s;}
.loaded {animation-name: widthChange; animation-duration: 3s;}
p {text-align:center}
button {margin:20px}
@keyframes widthChange {
from {width: 200px;}
to {width: 400px;}
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// jQuery methods go here...
$(document).ready(function() {
$('img').addClass("loaded");
});
});
/* Your additional JavaScript goes here */
</script>
</head>
<body>
<img class = "image" src="elephant.jpg" alt="elephant"/>
<p><button>Button 1</button><button>Button 2</button><button>Button 3</button></p>
</body>
</html>
3 个解决方案
解决方案1
2 2015-04-24 21:18:12
You need to define vendor prefixes (at the time of writing) for webkit browsers, see support information . 您需要为Webkit浏览器定义供应商前缀（在撰写本文时），请参阅支持信息 。 Correct definition would look like this: 正确的定义如下所示：
$(function () { $('img').addClass("loaded"); });
img { width:200px; height:100px; } .loaded { -webkit-animation: widthChange 3s; animation: widthChange 3s; } p { text-align:center } button { margin:20px } @-webkit-keyframes widthChange { from { width: 200px; } to { width: 400px; } } @keyframes widthChange { from { width: 200px; } to { width: 400px; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img class="image" src="http://lorempixel.com/100/100" alt="elephant" />
If you want the image to preserve final state after the end of animation you can add animation-fill-mode: forwards; 如果您希望图像在动画结束后保留最终状态，则可以添加animation-fill-mode: forwards; : ：
-webkit-animation: widthChange 3s forwards;
解决方案2
1 已采纳 2015-04-24 21:25:54
You could try with this code that is supported by all browsers: fiddle 您可以尝试使用所有浏览器都支持的以下代码： 小提琴
img {
width:200px;
height:100px;
animation-name: widthChange;
animation-duration: 3s;
-webkit-animation-name: widthChange;
-webkit-animation-duration: 3s;
-moz-animation-name: widthChange;
-moz-animation-duration: 3s;
-0-animation-name: widthChange;
-0-animation-duration: 3s;
}
p {text-align:center}
button {margin:20px}
@-webkit-keyframes widthChange {
from {width: 200px;}
to {width: 400px;}
}
@-o-keyframes widthChange {
from {width: 200px;}
to {width: 400px;}
}
@-moz-keyframes widthChange {
from {width: 200px;}
to {width: 400px;}
}
@keyframes widthChange {
from {width: 200px;}
to {width: 400px;}
}
解决方案3
0 2015-04-24 21:23:04
At first animation-name is an experimental technology as you can check here: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name 首先，animation-name是一种实验性技术，您可以在此处进行检查： https : //developer.mozilla.org/en-US/docs/Web/CSS/animation-name
Second, every animation needs keyframes, which you don't have in your code, you can try using css transitions: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions 其次，每个动画都需要您的代码中没有的关键帧，您可以尝试使用CSS过渡： https : //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.