javascript - :after element with JQuery toggleclass 的过渡效果

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>