0
4

2 に答える 2

2

あなたのコードは 2 つの理由で失敗しています。まず、コード内の異なる場所に 2 つの不正な文字があります。ページを実行したときにボタンの横に表示される 1 つと、webkitTransitionEnd イベント リスナーの後にある JavaScript でエラーを引き起こしている 2 つ目です。次に、ドキュメントのヘッドにあるボタンにイベント リスナーを追加しようとすると、DOM がまだブラウザーに登録されていないため、失敗します。

次のコードは機能するはずです。また、 jQuery 文書の準備が整った関数を検討することも検討してください。

<!DOCTYPE>
<head>
<style>
.animate {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
}

.initial {
    -webkit-transform: rotate(0deg);
}

.final {
    -webkit-transform: rotate(360deg);
}​
</style>

</head>

<body>
<button type="button" id="button" class="animate initial">Click me!</button>​

<script>
document.getElementById('button').addEventListener('click', function()
{
    this.setAttribute('class', 'animate final');
});

document.getElementById('button').addEventListener('webkitTransitionEnd', function() {
    this.setAttribute('class', 'initial');
});
</script>
</body>
</html>
于 2012-04-28T23:30:29.037 に答える
0

Dreamweaverブラウザでサイトを表示しようとしていますか？プロパティを使用してい-webkitます。これらは、chromeやsafariなどのWebkitブラウザでのみ機能します。同様に、-mozタグはFirefoxでのみ機能します。

dreamweaverは-webkitタグを読み取らないと思います。オペラ、サファリとクローム、Firefox、IE-oにタグを使用してみてください。Chromeとsafariは-webkitcssを読み取りますが、無視します。読み取り方法がわからないためです。-webkit-moz-ms-moz-o

W3スクールには、IEを除くすべてのブラウザーをサポートする良い例がいくつかあります。http： //www.w3schools.com/css3/tryit.asp ？filename = trycss3_transition4 http://www.w3schools.com/css3/css3_transitions.asp

次を追加すると、transformcssプロパティ（-webkit-transformコード内）はIEで機能します-ms-transform：http ：//www.w3schools.com/css3/css3_2dtransforms.asp

于 2012-04-28T23:14:32.727 に答える