19

多くのプロジェクトで、画面領域から翻訳したい要素がページにあります（ドキュメントから飛び出させます）。適切なコードでは、これは、関連する要素にクラスを追加するだけで可能になるはずです。その後、cssが残りを処理します。問題は、たとえば

.block.hide{
    -webkit-transform:translateY(-10000px);
}

を使用すると、要素はまず画面から不必要に遠くに、不必要に高速で飛び出します。そして、純粋に美的観点からは、まだまだ多くの要望があります（理論的には、たとえば、高さ10000pxの画面が将来導入される可能性があります）。

（更新）パーセンテージを使用できない問題は、100％が親要素/画面サイズではなく、要素自体に関連していることです。また、フルサイズの親に要素を含めることは可能ですが、クリックイベントで混乱が生じます。そして、いくつかの回答の後、私が翻訳について話しているのであって、css3トランジションについてではないことを指摘させてくださいposition:absolute（これらはすべて問題ありませんが、十分に理解すると、楽しくなくなります）。

一定の時間内に要素を画面から変換できるようにするための、見た目に美しいソリューションは何でしょうか。

このjsfiddleには、基本的な概念を示すサンプルコードがあります。 http://jsfiddle.net/ATcpw/

（もう少し詳細については、以下の私自身の回答を参照してください）

4

8 に答える 8

11

コンテナで .block div をラップする場合:

<div class="container">
   <div class="block"></div>
</div>
<button>Click</button>

展開してから、クリックイベントの後にコンテナ自体を翻訳できます

document.querySelector("button").addEventListener("click", function () {
   document.querySelector(".container").classList.add("hide");
});

このスタイルで

.block {
    position:absolute;
    bottom:10px;
    right:10px;
    left:10px;
    height:100px;
    background:gray;
}

.container {
    -webkit-transition: -webkit-transform ease-in-out 1s;
    -webkit-transform-origin: top;
    -webkit-transition-delay: 0.1s; /* Needed to calculate the vertical area to shift with translateY */
}

.container.hide {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    /* background:#f00; /* Uncomment to see the affected area */ 
    -webkit-transform: translateY(-110%);
}

このようにして、正確な平行移動率 (100% を少し上回る、邪魔にならないようにするため) を適用し、ボタンをクリック可能に維持することができます。

ここで実際の例を見ることができます: http://jsfiddle.net/MG7bK/

PS: 遷移遅延は transitionY プロパティにのみ必要であることに気付きました。そうしないと、高さの実際の値を取得する前に開始しようとするため、アニメーションが失敗する可能性があります。translateX で水平方向の非表示を使用する場合は省略できます。

于 2013-03-14T19:35:14.617 に答える
10

私がしたことは、vh（ビューの高さ）単位を使用することです。要素自体ではなく、常に画面サイズに相対的です。

/* moves the element one screen height down */
translateY(calc(100vh))

したがって、画面内の要素の位置 (たとえばtop:320px) がわかっている場合は、画面から正確に移動できます。

/* moves the element down exactly off the bottom of the screen */
translateY(calc(100vh - 320px))
于 2015-10-28T04:48:52.543 に答える
7

私はこれがあなたが求めていたものではないことを知っていますが...

Greensock の Animation Platformで CSS アニメーションを使用することを検討しますか? これは非常に高速です (jQuery よりも 20 倍高速であると主張しています)。速度テストはこちらで確認できます: http://www.greensock.com/js/speed.html

それはあなたのコードをより良くすると信じています.CSSアニメーションをハックしようとする代わりに、より重要なことに集中することができます.

ここで JSFiddle を作成しました: http://jsfiddle.net/ATcpw/4/

CSS と可能な JS の両方がよりシンプルに見えます。

document.querySelector("button").addEventListener("click",function(){
    var toAnimate = document.querySelector(".block");
    TweenMax.to(toAnimate, 2, {y: -window.innerHeight});
});

CSS:

.block{
    position:absolute;
    bottom:10px;
    right:10px;
    left:10px;
    height:100px;
    background-image: url(http://lorempixel.com/800/100);
}
于 2013-03-12T17:41:27.157 に答える
4

私は最近、「パネル」(またはページ) とアプリケーションのタブをビューの内外にスライドさせるために正確にこの手法を使用するアプリを作成しました。タブ メカニズムの基本的な実装は、ここで確認できます。

基本的に（概念を説明するための疑似コード、接頭辞などを除く）：

.page {
    transform: translateY(100%);
}

.page.active {
    transform: translateY(0%);
}

私が抱えていた問題は、特に Android Webkit がパーセンテージ値を正しく計算しないことでした。最後に、スクリプトを使用してビューポートの幅を取得し、値をピクセル単位で指定してから、動的スタイルシート解析用のライブラリを使用してルールを記述しなければなりませんでした。

しかし、最終的には、これらのプラットフォーム固有の問題がわずかであったにもかかわらず、これは私にとっては完璧に機能しました。

于 2013-03-12T14:46:57.180 に答える
1

メソッドを使用calcする（http://jsfiddle.net/ATcpw/2/）：

.block{
    position:absolute;
    top: -webkit-calc(100% - 110px);
    right:10px;
    left:10px;
    height:100px;
    background:gray;
    -webkit-transition: all 2s;
    /*this adds GPU acceleration*/
    transform: translate3d(0,0,0); 
    -webkit-transform: translate3d(0,0,0);
}
.block.hide{
    top: -100px;
}

-webkitプレフィックスを使用しているので、私も使用しました 。calcほとんどのブラウザでサポートされています：http：//caniuse.com/#search=calc

于 2013-03-12T14:32:35.133 に答える
0

非常に単純ですが、見た目が良くない解決策の1つは、クラスを動的に定義することです。

var stylesheet = document.styleSheets[0];
var ruleBlockHide;

と

//onresize
if(ruleBlockHide) stylesheet.deleteRule(ruleBlockHide);
ruleBlockHide = stylesheet.insertRule('.block.hide{ -webkit-transform:translateY(-'+window.innerHeight+'px); }',stylesheet.cssRules.length);

参照： http： //jsfiddle.net/PDU7T/

ルールへの参照を保持する必要がある理由は、各画面のサイズを変更した後、ルールを削除して再度追加する必要があるためです。

このソリューションは仕事を成し遂げますが、javascriptなしでこれを行うことができるいくつかのDOM / CSSの組み合わせが必要です（そのようなブロックを含む100％x100％要素の行に沿ったものですが、私はできませんでした変換ベースの方法を理解するため）。

于 2013-03-09T23:14:24.993 に答える
-1

ドキュメントの幅を取得します。次に、java スクリプト トリガーを使用して css3 変換をトリガーします。

       function translate(){

       var width = document.body.Width;
        document.getElementById('whateverdiv').style='translateX(' + width + 'px)';

       }
于 2013-03-13T20:23:21.583 に答える
-1

これは簡単です div に以下を追加します

.myDiv {
    -webkit-transition-property: left;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: initial
}

次に、追加のクラスを追加するか、jQuery を使用して、その「左」プロパティを変更します

これにより、x 軸に沿ってアニメーション化されます

注: -webkit-transition-property を任意のプロパティに変更すると、アニメーション化されます

于 2013-03-15T17:49:21.347 に答える