8

クリックしてドラッグするdivがあります。エリアに配置されると、次の方法でその位置にアニメーション化されます。

$("#wheel1").animate({left: "200px", top: "100px"});

私はそれをアニメーション化することもできます：

@-webkit-keyframes wheel1 {
    0% {
    }
    100% {
        -webkit-transform: translate(200px, 100px);
    }
}

違いは; jQueryを使用すると、ドキュメントの左から200pxにアニメーション化されます。CSS3では、ドロップした場所から200pxをアニメーション化します（これは悪いことです）

jQueryのように、ドキュメントの左上からCSS3をアニメーション化する方法はありますか？運が悪かったので、transform-originと他のいくつかの設定を変更してみました。

4

3 に答える 3

6

私はCSS3変換の専門家ではありませんがtranslate、要素の元の位置に関連していると思います。

CSSで必要なことを達成するために私が見ることができる1つの方法は、要素を絶対的に配置し、CSS3を使用してそのプロパティをtransition変更することです。lefttop

これがフィドルです：http：//jsfiddle.net/nSa9s/2/

HTML：

<div class="box"></div>

CSS：

.box {
    position: absolute;
    background: #ff0000;
    left: 400px;
    top: 200px;
    width: 100px;
    height: 100px;
    -webkit-transition: all 1.0s linear;
    -moz-transition: all 1.0s linear;
    -o-transition: all 1.0s linear;
    -ms-transition: all 1.0s linear;    
    transition: all 1.0s linear;
}
.box.move {
    left: 200px;
    top: 100px;
}

jQuery：

$(document).ready(function() {
    $('.box').on('click', function() {
        $(this).addClass('move');
    });
});

JSの目的は、moveクリックされたときにクラスを要素に追加することです。

于 2012-06-14T02:59:20.153 に答える
0

私が間違っている場合は訂正してください。ただし、CSS3アニメーションを使用する理由は、jQueryアニメーションがCSS3アニメーションで実行できることを実行していないためです。

私が正しければ、.transitという名前のこのjQueryプラグインを見てください。これにより、CSS3形式で適用されるのと同じ方法ですべてのCSS3アニメーションを任意のセレクターに適用できますが、これはプログラムによるjQueryメソッドを介して行われます。

このプラグインは、CSS3のスライドと移動の要件、およびその他のCSS3アニメーションを処理します。上記のリンクには、ページ全体に例があります。

これが望ましくない場合は、オブジェクトが別の要素に「ドロップ」されたときにCSSが「検出」できないことを認識してください。疑似トリガーがありますが、それは何:hoverがあっても毎回トリガーされます。

于 2012-06-14T04:19:36.400 に答える
0

参考までに、CSSアニメーション（選択した回答が示すようにトランジションではない）でこれを行うにはleft、変換する代わりにキーフレームで使用する必要があります。

@-webkit-keyframes wheel1 {
    0% {}
    100% {
        left:200px; top: 100px;
    }
}
于 2013-03-27T22:06:01.870 に答える