私はこれを見つけました：変換後の幅/高さ
他にもいくつかありますが、私が探しているものは何もありません。私が望むのは、何かをそのサイズの 50% に拡大し (もちろんアニメーション化されたトランジションで)、ページ レイアウトを要素の新しい (視覚的な) サイズに再調整することです。デフォルトでは、要素がレイアウト構造で元のサイズを保持し、関連付けられた変換で描画されるだけです。
基本的に、ユーザーにテキストのブロック (または他のコンテンツ) をクリックしてもらい、そのテキストをそのサイズの 50% (またはその他) に拡大して、下のパネルに貼り付けて、選択されていることを示します。要素を移動した後、要素の周りに 50% の空白を入れたくありません。
高さ/幅を再設定しようとしましたが、要素自体が新しいレイアウトになり、スケールが新しいレイアウトに適用され、すべてが終了した後でも 50% の余白が残ります。私の mozilla 固有の (簡単にするため) コードは次のようになります。
<script type="text/javascript">
function zap(e) {
var height = e.parentNode.offsetHeight/2 + 'px';
var width = e.parentNode.offsetWidth/2 + 'px';
e.parentNode.style.MozTransform='scale(0.0)';
e.parentNode.addEventListener(
'transitionend',
function() {
var selectionsArea = document.getElementById("selected");
selectionsArea.appendChild(e.parentNode);
e.parentNode.style.MozTransform='scale(0.5,0.5)';
e.parentNode.style.display = 'inline-block';
e.parentNode.style.height = height;
e.parentNode.style.width = width;
},
true)
}
</script>
これを達成するために、マイナスのマージンや相対的なポジショニングをいじる必要がないことを本当に望んでいます...
編集：これを書いてから、コメントも回答もない非常によく似た質問を見つけました。html5 固有のソリューションであることを気にしないため、少し異なります。html レベルに関係なく、ソリューションが存在しないか、CSS/javascript にあると思われます。
CSS3 transform scale() を使用して、DOM 要素とそれが占めるスペースをスケーリング/ズームします。
編集2：（別の非動作試行）
私もこれを試しましたが、スケールと変換機能は、最終的な位置を予測することを不可能にする方法で相互作用しているようです...そして、変換前のスケールは、変換後のスケールと同じではないようです。残念ながら、スケール係数によって変換を調整するだけの問題ではありません...
function posX(e) {
return e.offsetLeft + (e.offsetParent ? posX(e.offsetParent) : 0)
}
function posY(e) {
return e.offsetTop + (e.offsetParent ? posY(e.offsetParent) : 0)
}
function placeThumbNail(e, container, x, y, scale) {
var contX = posX(container);
var contY = posY(container);
var eX = posX(e);
var eY = posY(e);
var eW = e.offsetWidth;
var eH = e.offsetHeight;
var margin = 10;
var dx = ((contX - eX) + margin + (x * eW * scale));
var dy = ((contY - eY) + margin + (y * eH * scale));
// assumes identical objects
var trans = 'translate(' + dx + 'px, ' + dy + 'px) ';
var scale = 'scale(' + scale + ',' + scale + ') ';
e.style.MozTransform = trans + scale ;
}
たとえそれが機能したとしても、上記では、このコードを実行する前に(空白を取り除くために)最初に要素をページの下部に移動する必要があり、さらにサイズ変更時に変換を再計算する必要があります.. . とにかく、この試みにはあまり満足していませんでした。
scale + transまた、 vstrans + scale上記を使用すると、結果が大幅に異なることに注意してください。
編集 3:配置の問題を理解しました...変換は指定された順序で適用され、scale(0.5,0.5)基本的にピクセルのサイズを元の半分に変更します(おそらく、内部でどのように実装したかを示唆しています)。平行移動を最初に設定すると、スケールによって左上隅の位置が変化したことを考慮して、平行移動をわずかに増減するだけでうまくいきますが、オブジェクトの位置を管理し、DOM が変更されたときに変換を調整する必要があります。合理的な方法はまだ私を逃れています。この効果を得るために、JavaScript で独自のレイアウト マネージャーを作成する方向に流されているため、この種の操作は間違っていると感じています。