使用 JQuery 切换类对 :after 元素的转换效果

Question

我正在使用 toggleClass 将一个类 .expend 添加到一个 div #menu 中，它将菜单的高度从 100 像素扩展到 200 像素，并且平滑过渡（进出）。
我还有一个元素#menu:after 用于设计目的。

我的问题是当 .expend 类被切换并且我的 :after 元素出现时，没有淡入（或淡出）动画。

我正在寻找一种干净的方式来添加与我的菜单相同的过渡动画效果到我的伪元素之后。我该怎么做？

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

#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 过渡，因为生成的内容不是 DOM 的一部分，javascript 无法访问它:)

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

#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>