2

css3 トランジションを使用してページをアニメーション化しようとしています。要素を移動し、css3 を使用してアニメーション化できるようにする必要があります。たとえば、非表示の div を画面の外に移動し、アニメーション化して画面に戻します。奇妙に聞こえますが、説明を簡略化したので、この機能が本当に必要です。したがって、以下のコードでは、要素を 400px 左に移動し、それを 0 にアニメーション化します。アニメーションは 400px 移動せず、CSS3 トランジション クラスを追加し、0px にアニメーション化します。うまく説明できたと思います...助けてくれてありがとう。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My test page</title>
<style type="text/css">
    .box{
        height:100px;
        width:100px;
        background-color:green;
        position:absolute;
        top:100px;
    }
    .animator{
        -webkit-transition: all 1.5s ease;
        -moz-transition: all 1.5s ease;
        transition: all 1.5s ease;
    }
</style>
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.box').css({left:'400px'});
        $('.box').addClass('animator');
        $('.box').css({left:'0px'});

    });

</script>
</head>
<body>
<div class="box">1</div>
</body>
</html>
4

4 に答える 4

0

このページには、CSS3アニメーションの使用方法に関する優れた説明があります。

https://developer.mozilla.org/en/CSS/CSS_animations

あなたが探しているのは「キーフレーム」であり、そのページでそれらを説明しています。とにかくあなたが探しているもののようです。おそらく、質問をもう少し明確にすることができますか？

于 2012-04-15T12:59:54.277 に答える
0

アニメーションは、アプリケーション スタックの最後で実行されます。したがって、次のように書いた場合：

// initial state -> elment has left 0
$('.box').css({left:'400px'}); // set left to 400
$('.box').addClass('animator');// set animation duration to 1.5s
$('.box').css({left:'0px'});   // set left to 0
// perform animation from 0 to 0

スタックを壊してブラウザ操作を実行したい場合は、window.setTimeout を使用できます。

$('.box').css({left:'400px'}); // set left to 400
// move element from 0 to 400
window.setTimeout(function(){  
     $('.box').addClass('animator');// set animation duration to 1.5s
     $('.box').css({left:'0px'});   // set left to 0
},1)
// perform animation from 400 to 0
于 2012-12-01T20:54:49.130 に答える
0

これでいいと思います

$('.box').animate({left:'400px'}).fadeIn().addClass('animator').animate({left:'0px'});
于 2012-04-15T13:04:12.313 に答える