SASSミックスインを使用してドロップダウンをアニメ化する

Question

私は一連のNavドロップダウンを持っています。ユーザーがその中の1つを上に移動すると、アニメーションを使用してそのオブジェクトを開くことができます。だから私のHTMLは次のようなものになります。

<div class="nav-dropdown-contents short-dropdown"> 
    <div>Item 1</div> 
    <div>Item 2</div> 
</div> 

<div class="nav-dropdown-contents medium-dropdown"> 
    <div>Item A</div> 
    <div>Item B</div> 
    <div>Item C</div> 
    <div>Item D</div> 
</div> 

だから、短いドロップダウンが2つのアイテムを持っているが、培地のドロップダウンはここ4

を持っている私の短いドロップダウンのためのSCSSです：

.short-dropdown { 
    &.open { 
     animation-name: shortDropdownOpenAnimation; 
     animation-duration: 400ms; 
    } 

    &.closed { 
     animation-name: shortDropdownCloseAnimation; 
     animation-duration: 400ms; 
    } 
} 

そしてI thusly定義された2つのアニメーションを持っている：

@keyframes shortDropdownOpenAnimation { 
from { 
    height: 0px; 
} 

to { 
    height: 50px; 
} 

}

@keyframes ShortDropdownCloseAnimation { 
from { 
    height: 50px; 
} 

to { 
    height: 0px; 
} 

}

だから、これは素晴らしい作品が、今も私の中のドロップダウンのためのキーフレームを定義する必要があります。アイテム数の異なるドロップダウンが増えるにつれて、これらのミックスインをすべて1つの要素にまとめることができればうれしいです。

ミックスインをアニメーションとどのように使うかの例ですが、それらはすべて冗長であり、どのプロパティもアニメートすることができます。私は高さをアニメーション化する必要があります。それでおしまい。私はそれを行うための最も簡単な方法を探しています。

ありがとうございました。

アーロン

Answer 1

インナーラッパーを使用し、それに任意のアニメーションを適用します。

https://jsfiddle.net/v3act47k/1/

.dropdown { 
    transition: all ease 1s; 

    .inner-wrap { 
    transform: translate3d(0, -100%, 0); 
    visibility: hidden; 
    animation-duration: 1s; 
    animation-fill-mode: forwards; 
    } 
    &:hover { 
    .inner-wrap { 
     animation-name: slideInDown; 
     animation-duration: 400ms; 
    } 
    } 
} 

@keyframes slideInDown { 
    from { 
    transform: translate3d(0, -100%, 0); 
    } 

    to { 
    transform: translate3d(0, 0, 0); 
    visibility: visible; 
    } 
} 

Answer 2

あなたは、このような最大の高さにアニメーションを変更することができます：

@keyframes dropdownOpenAnimation { 
from { 
    max-height: 0px; 
} 

to { 
    max-height: 300px; 
} 

問題は、小さなドロップダウンアニメーションが速くなることです大きなものよりも。アニメーションの時間を変更して、両方のオブジェクトで同じ感情を実現する必要があります。