-3
の<script></script>
タグに問題があります。 私は、左上から右下に移動したいオブジェクトを持っています。 私はそれを動かすためにCSSアニメーションを使用しています。アニメーションが終了したら、そのオブジェクトを非表示にします。ここでCSSアニメーション - JS x.addEventListener( "webkitAnimationEnd" ...)が機能しない
はHTMLです:
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta charset="utf-8">
<meta description="Descriptionhere">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
function endfunct() {
$('#object').css('display', 'none');
};
var hiding = document.getElementById('object');
hiding.addEventListener("webkitAnimationEnd", endfunct());</script>
</head>
<body>The object is here: its id is "#object"</body>
</html>
とCSS:
/* Animation */
#object {
/*padding-left: 200px;*/
padding-top: 0;
animation-duration: 6s;
animation-name: slidein;
animation-iteration-count: 1;
animation-timing-function: linear;
}
@keyframes slidein {
from {
margin-left: -100%;
width: auto;
}
to {
margin-left: 300%;
width: auto;
padding-top: 500px;
}
}
/* END Animation */
私はJSとほぼ新たなんだ、これが動作しない理由を私は得ることはありません。 また、これを行う元の方法は別のJSシートで行われましたが、何が起こったのかは、シートの中に何を入れても何もしませんでした。リンクが悪いためだと思います。リンクは次のとおりです:
<script src="javascript/animation.js"></script>
編集済みです。 ありがとうございます。
私はオブジェクトがIDではないことに気がついたので、オブジェクトをオブジェクトの#objectからcssに、クラスのオブジェクトをオブジェクトのIDに変更しました。これは私がスクリプトタグで今持っているものです: ' 'しかしどちらもうまくいきません。 –