使用JQuery toggleclass

Question

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

我的问题是，当课程.expend被切换并且我的：after元素出现后，其中没有淡入淡出（也不淡出）动画。

我正在寻找一种干净的方式来添加我的菜单所具有的相同过渡动画效果。我怎么能这样做？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你应该为伪#menu:after＆amp;设置一个CSS过渡。 #menu.expend:after因为生成的内容不是DOM的一部分，javascript无法访问它:)

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;