translateY（）を使って隠し要素を空白なしで移動する

Question

ユーザーが要素をクリックしたときに特定のセクションを表示するアニメーションを作成したいと思います。ページがロードされると、セクションは非表示のままです（translateY(-700px)）。イベントのクリックをクリックすると、クラス._activeの切り替えが行われ、margin-bottomプロパティの遷移を使用すると、アニメーションのFPSカウントは低くなります。

質問： このセクションを非表示にして空白を残すことなくこのセクションをアニメーション化する方法はありますか？

.section { 
    padding: 50px 0 20px 0; 
    background-color: black; 
    display: block; 
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05); 
    transform: translateY(-700px); 
    transition: transform 1s; 

    &._active { 
    transform: translate(0, 0); 
    margin-bottom: 0; 
    } 
} 

Answer 1

以下のセクションのための

SASSコードあなたがtranslateを使用している間は、ブラウザは、スタイル要素の実際のサイズを記憶しています。あなたはそれに近づくための一つの選択肢はtranslateYとともにheightを移行している、paddingを削除することができた場合：

var toggler = document.getElementById("toggler"); 
 
var toggled = document.getElementById("toggled"); 
 

 
toggler.addEventListener("click", e => { 
 
    toggled.classList.toggle('_active'); 
 
})

.section { 
 
    /* padding: 50px 0 20px 0; */ 
 
    background-color: black; 
 
    color: white; 
 
    display: block; 
 
    height: 0; 
 
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05); 
 
    transform: translateY(-700px); 
 
    -webkit-transform: translateY(-700px); 
 
    transition: transform 1s, height 1s; 
 
    -webkit-transition: transform 1s, height 1s; 
 
} 
 
.section._active { 
 
    transform: translate(0, 0); 
 
    margin-bottom: 0; 
 
    height: 130px; /* adjust for your section content */ 
 
}

<button id="toggler">Toggle visibility</button> 
 

 
<section id="toggled" class="section"></section> 
 

 
<section> 
 
    <p> 
 
    Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet 
 
    </p> 
 
</section>

をあなたのセクション内のすべてのコンテンツを持ってしようとしている場合は、1がパッドそれにハックセクションバックグラウンドと同じ色のborderを使用し、_activeクラスのheightプロパティを調整します。

Answer 2

実際、私はそれを理解しました。

heightとmargin-bottomの両方のプロパティを使用すると、不鮮明なアニメーションになります。私がその状況で遭遇した唯一の方法は、表示する要素とともに移動する必要があるすべての要素にtransform: translateY()を使用することです。

ウェブページのすべてのセクションに別のクラスを追加し、それをtransformプロパティに変更しました。このようにして、私は円滑なアニメーションを実現しました:)。もっと良い方法があれば教えてください！ `translate`を使用していない

$('#panel').on('click', function() { 
 
    $('.new-class').toggleClass('down'); 
 
    $('.advanced-search').toggleClass('_active'); 
 
});

.hero { 
 
    height: 700px; 
 
    background-color: #FFD400; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
#panel { 
 
width: 100%; 
 
color: white; 
 
background: #2E294E; 
 
font-weight: bold; 
 
font-family: Helvetica, sans-serif; 
 
text-align: center; 
 
padding: 30px 0; 
 
position: relative; 
 
z-index: 2; 
 
} 
 

 
.advanced-search { 
 
height: 700px; 
 
display: block; 
 
width: 100%; 
 
background: #D90368; 
 
text-align: center; 
 
margin-bottom: -700px; 
 
transform: translateY(-700px); 
 
transition: transform 1s; 
 
} 
 

 
.new-class { 
 
background-color: #F1E9DA; 
 
height: 300px; 
 
width: 100%; 
 
border: 1px solid white; 
 
text-align: center; 
 
font-family: Helvetica, sans-serif; 
 
transition: transform 1s; 
 
} 
 

 
.new-class.down { 
 
    transform: translateY(700px); 
 
} 
 

 
.advanced-search._active { 
 
    transform: translateY(0px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hero"></div> 
 
<div id="panel"> Click to show </div> 
 
<div class="advanced-search"></div> 
 
<div class="new-class"> 
 
    Some content 
 
</div> 
 
<div class="new-class"> 
 
    Some content 
 
</div> 
 
<div class="new-class"> 
 
    Some content 
 
</div> 
 
<div class="new-class"> 
 
    Some content 
 
</div> 
 
<div class="new-class"> 
 
    Some content 
 
</div> 
 
<div class="new-class"> 
 
    Some content 
 
</div>