CSSトランスフォームを他の要素のフローに影響を与える方法

Question

transformプロパティを持つCSSトランジションを使用して、要素を追加したり削除したりするときに縮小します。

ただし、このプロパティは他の要素のフローに影響を与えないため、削除される要素が縮小してから、残りの要素が突然ジャンプするように見えます。

トランスフォームを使用する代わりにheightプロパティをアニメーション化すると、実際の使用では可変高さの要素が使用されるため、アニメーション化できる高さはわかりません。

---

編集：人々は（上述のように動作しません）height財産、またはmax-heightプロパティをアニメーション示唆しています。 max-heightプロパティはある程度は機能しますが、トランジションが移行時間の最後まで要素の実際の高さを超えてプロパティを調整し続けるので、タイミングを完全に調整することはできません。

これらのアプローチのもう1つの問題は、transformプロパティで実現できるスムーズなアニメーションを使用しないことです。オブジェクトの変換はスムーズに行われますが、ブラウザがこれらのトランジションを異なる方法でレンダリングすると、次の要素の動きがぼやけます。

---

は、ここで私が何を意味するかとJSFiddle（その後、削除の要素を追加してみてください、そして要素が削除されたときのジャンプを参照してください）です。

var button = document.querySelector("button"); 
 
var box = document.createElement("div"); 
 

 
box.className = "box"; 
 
box.appendChild(document.createTextNode("Click to delete")); 
 

 
button.addEventListener("click", function(e) { 
 
    var new_box = box.cloneNode(true); 
 

 
    new_box.addEventListener("click", function(e) { 
 
    this.className = "box deleting"; 
 
    window.setTimeout(function(e) { 
 
     new_box.remove(); 
 
    }, 1000); 
 
    }); 
 

 
    this.parentNode.appendChild(new_box); 
 
});

button { 
 
    font-size: 20pt; 
 
} 
 
.box { 
 
    font-size: 20pt; 
 
    margin: 10px; 
 
    width: 200px; 
 
    padding: 10px; 
 
    background: pink; 
 
    transform: scale(1, 1); 
 
    transform-origin: top left; 
 
} 
 
.deleting { 
 
    transform: scale(1, 0); 
 
    transition: all 1000ms ease; 
 
}

<button> 
 
    Add Box 
 
</button>

Answer 1

、 はtransformプロパティを 変換要素を周囲のコンテンツの流れに影響を与えません。

REF：Transform Rendering

あなたは所望の効果を得るためにmax-heightプロパティ（check this answer）を使用する必要があります。

var button = document.querySelector("button"); 
 
var box = document.createElement("div"); 
 

 
box.className = "box"; 
 
box.appendChild(document.createTextNode("Click to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to delete")); 
 

 
button.addEventListener("click", function(e) { 
 
    var new_box = box.cloneNode(true); 
 
    new_box.style.height = (Math.random() * (200 - 30) + 30) + 'px'; 
 

 
    new_box.addEventListener("click", function(e) { 
 
    this.className = "box deleting"; 
 
    window.setTimeout(function(e) { 
 
     new_box.remove(); 
 
    }, 1000); 
 
    }); 
 

 
    this.parentNode.appendChild(new_box); 
 
});

button { 
 
    font-size: 20pt; 
 
} 
 
.box { 
 
    overflow:hidden; 
 
    font-size: 12pt; 
 
    margin-bottom: 10px; 
 
    width: 600px; 
 
    max-height:1000px; 
 
    padding: 10px; 
 
    background: pink; 
 
    transform: scaleY(1); 
 
    transform-origin: top left; 
 
} 
 
.deleting { 
 
    transform: scaleY(0); 
 
    max-height:0; 
 
    padding:0 10px; 
 
    margin-bottom:0; 
 
    transition: padding 1000ms ease,max-height 1000ms ease, transform 500ms ease 500ms, margin-bottom 1000ms ease; 
 
}

<button> 
 
    Add Box 
 
</button>

Answer 2

あなたは周りのラッパーを作成することができます収縮する箱。今では、赤いボックスをスケーリングしているだけです。つまり、同じスペースを使用していますが、スケーリングされた形でレンダリングされています。最終的にそれを削除すると、それはもはやそのスペースを使用しません、その下の要素は上に飛びます。

各赤いボックスの周りにラッパーを作成すると、そのスペースを制御できます。 トランジションでそのラッパーの高さを変更するだけです。

/* css for a wrapper */ 
overflow: hidden; 
transition: height .2s; /* your time */ 

だから、唯一の遷移に赤いボックスを拡張するだけでなく、ラッピング要素に入れて、その要素の高さを変更しないでください。

Answer 3

最高の効果を得るには、周囲に影響するボクシングプロパティを変更する必要があります。これには、幅/高さ、パディング、マージン、および境界幅が含まれます。以下の例では、目的のエフェクトに関連するプロパティを0に設定しています。私もボックスにbox-sizing: border-box;とoverflow: hidden;を追加height、padding-[top/bottom]、margin-[top/bottom]、およびborder-[top/bottom]-widthすべて0

に移行している - あなたはそれらがないときに何が起こるかを見るべきである：これは、すべての要素の垂直方向の間隔に影響するプロパティが含まれてセット。私はあなた自身でそれらについて学ぶことができます。レイアウトCSSボックスモデルによって支配されている要素については

var button = document.querySelector("button"); 
 
var box = document.createElement("div"); 
 

 
box.className = "box"; 
 
box.appendChild(document.createTextNode("Click to delete")); 
 

 
button.addEventListener("click", function(e) { 
 
    var new_box = box.cloneNode(true); 
 

 
    new_box.addEventListener("click", function(e) { 
 
    new_box.style.height = this.offsetHeight + 'px'; 
 
    window.requestAnimationFrame(function() { 
 
     new_box.style.height = 0; 
 
     new_box.className = "box deleting"; 
 
     window.setTimeout(function(e) { 
 
     new_box.remove(); 
 
     }, 1000); 
 
    }); 
 
    }); 
 

 
    this.parentNode.appendChild(new_box); 
 
});

button { 
 
    font-size: 20pt; 
 
} 
 
.box { 
 
    box-sizing: border-box; 
 
    overflow: hidden; 
 
    font-size: 20pt; 
 
    margin: 10px; 
 
    width: 200px; 
 
    padding: 10px; 
 
    border: 5px solid red; 
 
    background: pink; 
 
    transform: scale(1, 1); 
 
    transform-origin: top left; 
 
} 
 
.deleting { 
 
    height: 0; 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    border-top-width: 0; 
 
    border-bottom-width: 0; 
 
    transform: scale(1, 0); 
 
    transition: all 1000ms ease; 
 
}

<button> 
 
    Add Box 
 
</button>