JQueryトグルクラスを使用したa：after要素へのトランジション効果

Question

toggleClassを使用して、.expendのクラスを#menuに追加しました。メニューの高さは100から200pxまでスムーズに移行します（イン/アウト）。
私はまた、設計目的のために要素#menu:afterを持っています。

私の問題は、クラス.expendがトグルしているときに私：要素が表示された後に、THERは（もフェードアウト）アニメーションにはフェードがありません。

私が持っていた後、私のメニューは私の擬似要素を持っている同じトランジションアニメーション効果を追加するためのクリーンな方法を探しています。どうやってやるの ？生成されたコンテンツは、DOMの一部ではないので、

\t $('#link').click(function() { 
 
\t \t $("#menu").toggleClass("expend"); 
 
\t \t $('.input-area').fadeToggle(300); 
 
\t });

#menu { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px solid blue; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    transition: 0.3s ease-out; 
 
} 
 

 
#menu.expend { 
 
    height: 200px !important; 
 
} 
 

 
#menu.expend:after { 
 
    content: 'how to get a 0.3 transition effect here (fade in and fade out) ?'; 
 
    position: absolute; 
 
    top: 170px; 
 
    left: 30px; 
 
    width: 170px; 
 
    height: 60px; 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="link" href="#">click me</a> 
 
<div id="menu"> 
 
    <div class="input-area"> 
 
    <input type="text" name="test" id="test" value=""/> 
 
    </div> 
 
</div>

Answer 1

あなたは#menu:after & #menu.expend:afterための擬似のCSSトランジションを設定する必要があり、javascriptのは、それに到達することはできません:)

$('#link').click(function() { 
 
\t \t $("#menu").toggleClass("expend"); 
 
\t \t $('.input-area').fadeToggle(300); 
 
\t });

#menu { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px solid blue; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    transition: 0.25s ease-out; 
 
} 
 

 
#menu.expend { 
 
    height: 200px !important; 
 
} 
 
/* set values of your own , idem for transition timing :) */ 
 
#menu:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 30px; 
 
    width: 170px; 
 
    height: 0px; 
 
    border: 0px solid red; 
 
    transition:height 0.3s, top 0.3s, border 0.25s ; 
 
    overflow:hidden; 
 
} 
 
#menu.expend:after { 
 
    content: 'how to get a 0.3 transition effect here (fade in and fade out) ?'; 
 
    position: absolute; 
 
    top: 170px; 
 
    left: 30px; 
 
    width: 170px; 
 
    height: 60px; 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="link" href="#">click me</a> 
 
<div id="menu"> 
 
    <div class="input-area"> 
 
    <input type="text" name="test" id="test" value=""/> 
 
    </div> 
 
</div>

あなたのための