2

要素に翻訳を適用し、それ自体ではなくページ上のポイントに移動するにはどうすればよいでしょうか?

たとえば、以下のコードでは、「card」要素が開始位置に対して 50、100 移動します。私が代わりに望むのは、ページの中央に移動することです。

<html>
<head>
<style>

.face {
    -webkit-backface-visibility: hidden;
    position: absolute;
    height: 140;
    width: 80;
    overflow: hidden;
}

.card {
    height: 100;
    width: 80;
    float: left;
    -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
    margin-left: 5px;
     -webkit-transition-property: transform;
     -webkit-transition-duration: 0.25s;
     -webkit-transition-timing-function: ease-out;
}

.activated {
    -webkit-transform: scale(2) translate(50px, 100px);
     -webkit-transition-duration: 0.35s;
     -webkit-transition-timing-function: ease-in;
}

</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

$(document).ready(function () {
    $('.card').click(function (e) {
        e.preventDefault();
        $(this).toggleClass("activated");
    });
});

</script>
</head>

<body>

<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>

<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>

<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>

<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>


</body>
</html>
4

1 に答える 1

2

私はあなたがそのために使うべきではないと思いますtranslate()。JavaScriptを使用して正しい値を計算したり操作したりすることもできると思いますがtransform-origin、そのような場合、CSS変換を使用する目的が損なわれます。

プロパティをアニメーション化することもできるので、translate()fromを削除し.activate、transitionプロパティを次のように変更できます.card 。

-webkit-transition-property: all;

次に、「通常の」CSSを使用してポジショニングを行うことができ、残りはトランジションが行います。たとえば、次のプロパティを追加します.activated。

position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -40px;

ただし、これには少し問題があります。CSSはtop、プロパティをスムーズに移行できますがleft、プロパティmarginをスムーズに移行することはできませんposition。そのため、カードがアクティブになると、最初に左上にジャンプしてから、ページの中央にスムーズに移動します。

元のカードを絶対に配置する以外に、それに対する解決策があるかどうかはわかりません。

また、を使用すると、他のカードの1つをアクティブにしても、他のtranslate()カードの位置は影響を受けません。ただし、私の例では、アクティブ化されたカードがフローから取り出されるため、他のカードは左に移動してギャップを埋めます（フローティング要素と同様）。それもあなたが望むものではないかもしれません。ただし、最初からすべてを絶対的に配置した場合、それは起こりません。

もちろん、まだ実験的であることを考えると、このような問題については仕様自体にたくさんの質問があります。

于 2010-06-07T16:15:43.863 に答える