9

私はhtml5、css、およびjavascriptを初めて使用します。ほとんどの場合、遊んでいただけです。私がやりたいことは、div のトランジションを設定してトリガーすることです。ページが読み込まれた後、トランジションを設定することでそれを行うことができます。しかし、それはあまり動的ではなく、正しい方法とは思えません。どんな助けにも感謝します

<!DOCTYPE html>
<html>
<head>   
    <style> 
        body{
            text-align: center;
        }

        #dialPointer
        {
            position:relative;
            margin-left: auto;
            margin-right: auto;
            width:23px;
            height:281px;
            background:url(pointer.png);
            background-size:100% 100%;
            background-repeat:no-repeat;

            transform: rotate(-150deg);
            transition-duration: 2s;
            transition-delay: 2s;

            -webkit-transform: rotate(-150deg);
            -webkit-transition-duration:2s;
            -webkit-transition-delay: 2s;
        }


        /* I want to call this once */
        .didLoad
        {
            width:23px;
            height:281px;
            transform:rotate(110deg);
            -moz-transform:rotate(110deg); /* Firefox 4 */
            -webkit-transform:rotate(110deg); /* Safari and Chrome */
            -o-transform:rotate(110deg); /* Opera */
        }

        </style>
</head>

<body>
    <div id="dialPointer"></div>
    <script language="javascript" type="text/javascript">
        window.onload=function () {
            //But instead of using rotate(110deg), I would like to call "didLoad"

            document.getElementById("dialPointer").style.webkitTransform = "rotate(110deg)";


        };
        </script>
</body>
</html>
4

3 に答える 3

6

遷移をトリガーする方法は、要素を CSS セレクターに一致させることです。これを行う最も簡単な方法は、トランジションをクラスに割り当て、Javascript を使用してそのクラスを追加することです。あなたの例では：

document.getElementById('dialPointer').classList.add('didLoad');

選択した要素がアニメーション化されます。(私はこれに Javascript を補完する標準を使用しましたが、古いブラウザーでは機能しないため、それを機能させるためにはあなたに任せます)。

ページの読み込み時にアニメーション化するには、load イベントに配置します。

window.addEventListener('load', function () {
    document.getElementById('dialPointer').classList.add('didLoad');
});
于 2012-07-12T11:25:21.187 に答える
6

次の JavaScript を使用して、いつでも要素にクラスを追加できます。

document.getElementById("dialPointer").className += " didLoad";

または、次のように jQuery を使用して、クロスブラウザーのサポートを保証したい場合は、間違いなく優れています。

$(function() {
 // Handler for .ready() called.
 $('#dialPointer').addClass('didLoad');
});

編集：

Windows の Chrome と Safari でテストしたfiddle here を参照してください。dialPointerスタイルの遷移コードをコメントアウトして、didLoadクラスに移動する必要がありました。また、フィドルで機能するように、背景画像を塗りつぶしに置き換えました。

于 2012-07-12T11:16:44.287 に答える
0

多分このようなもの：

document.getElementById("dialPointer").className += "didLoad";
于 2012-07-12T11:16:23.053 に答える