Question

我想在不使用jQuery的情况下实现上下滑动过渡。所以我尝试了以下香草JS解决方案：

https://w3bits.com/javascript-slidetoggle/

https://gist.github.com/ludder/4226288

但是这些解决方案无法使用我的HTML结构（很多flex框）工作。这是一个简单的例子。 https://codepen.io/michaelkonstreu/pen/eYmOmMX

使用showElement()和hideElement()上下滑动第二个元素。如您所见，动画无法正常工作。

使用jQuery实现它，效果很好。但是我想避免使用jQuery（尤其是当我仅使用两个jQ函数时），而应使用普通js来实现。

那么Vanilla js是否有可行的解决方案来实现上下滑动动画？

Answer 1

您可以使用简单的CSS进行向下滑动，如果需要使用javascript，则可以在控件onclick中简单添加样式

* { margin:0; padding:0; }
body { font-family: sans-serif;} 
#content { margin: 50px; } 
a { text-decoration: none; }  
 
.expandable {
  background: #fff;
  overflow: hidden;
  color: #000;   
  line-height: 50px;

  transition: all .5s ease-in-out;
  height: 0;
 }
 
 .expandable:target {
  height: 50px;
}

<div id="content"> 
  <a href="#nav"><span>Click Here</span></a>
  <div class="expandable" id="nav" onClick="showdiv(this)">
    <p>Cum enim magna parturient</p>
  </div>
  <a href="#nav2"><span>Click Here</span></a>
  <div class="expandable" id="nav2">
    <p>Cum enim magna parturient</p>
  </div>
</div>

CSS / JS：使用香草JS上下滑动过渡

1 个答案: