-1
私は、純粋なCSSベースのメニューに取り組んでいます。メニューのスライドを作成しようとしましたが、動作させることができませんでした。私はオンラインで多くのソリューションを見ていましたが、私の場合はどれも解決しませんでした。cssアニメーションを使用してメニューをアニメーション化する方法は？
ここに私の場合のレイダウンがあります。
- メニューには、タイトルとサブアイテム（サブメニュー）があります。このメニューは1つのレベルに過ぎません。
- メニュータイトルの背後にあるように、サブメニューの高さが必要です。
- サブアイテムの数は動的なので、特定の高さを使用せずにこれを達成したいと思います。
- transform：translateYはより良いオプションのようですが、メニュー項目はタイトルの上に表示されます。
- メニュー項目がメニューのタイトルの上に表示されず、翻訳などを使用する必要はありません。
正しいトラックにいるのか、何か初心者が欠けているのか分かりません。
$(function() {
$('.accordion-tabs__header').click(function() {
$('.accordion-tabs__body').toggleClass('collapsed');
$('.accordion-tabs__body').toggleClass('expanded');
});
});.accordion-tabs {
position: relative;
top: 2rem;
width: 60%;
}
.accordion-tabs__header {
transition-delay: 1s;
display: flex;
align-items: center;
padding: 1rem 0.5rem;
z-index: 10;
position: relative;
background-color: azure;
}
.accordion-tabs__header__title {
margin: 0;
padding: 0;
}
.accordion-tabs__body {
position: absolute;
width: 100%;
transition: 200ms transform ease-in-out;
}
.accordion-tabs__body.expanded {
z-index: 1;
transform: translateY(0%);
}
.accordion-tabs__body.collapsed {
z-index: 1;
transform: translateY(-100%);
}
.accordion-tabs__body .accordion-tabs__body__link {
display: flex;
align-items: center;
padding: 0.875rem;
background-color: antiquewhite;
}
.accordion-tabs__body .accordion-tabs__body__link a{
text-decoration: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
<div class="accordion-tabs">
<div class="accordion-tabs__header">
<div class="accordion-tabs__header__title">Menu Title Looong</div>
</div>
<div class="accordion-tabs__body collapsed">
<div class="accordion-tabs__body__link"><a class="link" href="#">Item One</a></div>
<div class="accordion-tabs__body__link"><a class="link" href="#">Item One</a></div>
<div class="accordion-tabs__body__link"><a class="link" href="#">Item Three</a></div>
</div>
</div>
</div>ここに私のコードにcodepenだ - https://codepen.io/flexdinesh/pen/VybwwE
あなたは、自動高さで正しくそれをアニメーション化することはできません。最大高さをアニメートし、メニューの最大高を設定することができます。これを見てください：https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css – Phiter
@Phiter私は最大高さを試しました。これは期待通りに機能しますが、アニメーションはReact-Reduxでトリガするまでに時間がかかります。反応と最大高さのバーチャルドームと関係があります。 –
固定高さを設定しても構わない場合は、オーバーフロー隠しで使用できます。 – Phiter