jQueryを使用せずに高さとパディングなしの要素をslide-togglingする

Question

jQueryでは、.slideToggle()と呼ばれるこのメソッドがあり、その高さとパディングに関係なく魔法のように上下にスライドします。私はそのライブラリを使わずに同じことを達成したいので、私は2つの実験を行いました：1つは高さを持つ要素を持ち、もう1つは高さが設定されていない要素があり、

実験1（高さを有している）：

document.querySelector('#experiment-1 > button').addEventListener('click', function() { 
 
    this.nextElementSibling.classList.toggle('slideToggle'); 
 
})

#experiment-1 > button { 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 

 
#experiment-1 > .box { 
 
    background: #eee; 
 
    color: #aaa; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    transition: all 3s linear; 
 
} 
 

 
#experiment-1 > .box.slideToggle { 
 
    height: 0; 
 
    padding: 0; 
 
    overflow: 0; 
 
    visibility: hidden; 
 
}

<section id="experiment-1"> 
 
    <button>Slide Toggle</button> 
 
    <div class="box"> 
 
    <span>Experiment 1</span> 
 
    </div> 
 
</section>

実験2（のみパディング）：実験で

document.querySelector('#experiment-2 > button').addEventListener('click', function() { 
 
    this.nextElementSibling.classList.toggle('slideToggle'); 
 
})

#experiment-2 > button { 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 

 
#experiment-2 > .box { 
 
    background: #eee; 
 
    color: #aaa; 
 
    display: inline-block; 
 
    padding: 5rem; 
 
    transition: all 3s linear; 
 
} 
 

 
#experiment-2 > .box.slideToggle { 
 
    padding: 0; 
 
    overflow: 0; 
 
    visibility: hidden; 
 
}

<section id="experiment-2"> 
 
    <button>Slide Toggle</button> 
 
    <div class="box"> 
 
    <span>Experiment 2</span> 
 
    </div> 
 
</section>

1私はそれがほぼ完璧だと思う、ボックスがほとんど閉じているとき、テキストはまだオーバーフローしている、私は3秒にそれをより明らかにするためにtrasitionの継続時間を設定します。

実験2では、唯一の問題はボックスが垂直ではなく斜めにスライドすることです。

jQueryを使用せずにこれらの2つを完全に動作させるにはどうすればよいですか？

Answer 1

overflow: hidden

<div>がその高さより短い場合#experiment-1 > .boxにoverflow: hiddenを追加すると、<span>のテキストを非表示になります。第二の例を修正するには

Answer 2

、単にそれが短くなるにつれて狭くなってからボックスを維持します

padding: 0 5rem; 

を読み取るためのライン

padding: 0; 

を変更。

Answer 3

あなたはこのように行うことができます：第一及び第二の実験の変更については

1. overflow:hiddenフォームoverflow:0

秒間

document.querySelector('#experiment-1 > button').addEventListener('click', function() { 
 
    this.nextElementSibling.classList.toggle('slideToggle'); 
 
})

#experiment-1 > button { 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 

 
#experiment-1 > .box { 
 
    background: #eee; 
 
    color: #aaa; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    transition: all 3s linear; 
 
} 
 

 
#experiment-1 > .box.slideToggle { 
 
    height: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    visibility: hidden; 
 
}

<section id="experiment-1"> 
 
    <button>Slide Toggle</button> 
 
    <div class="box"> 
 
    <span>Experiment 1</span> 
 
    </div> 
 
</section>

1. padding:5rem 5rem減らすO padding:0 5rem

document.querySelector('#experiment-2 > button').addEventListener('click', function() { 
 
    this.nextElementSibling.classList.toggle('slideToggle'); 
 
})

#experiment-2 > button { 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 

 
#experiment-2 > .box { 
 
    background: #eee; 
 
    color: #aaa; 
 
    display: inline-block; 
 
    padding: 5rem 5rem; 
 
    transition: all 3s linear; 
 
} 
 

 
#experiment-2 > .box.slideToggle { 
 
    padding: 0 5rem; 
 
    overflow: hidden; 
 
    visibility: hidden; 
 
}

<section id="experiment-2"> 
 
    <button>Slide Toggle</button> 
 
    <div class="box"> 
 
    <span>Experiment 2</span> 
 
    </div> 
 
</section>