下拉动画图标

Dropdown animation icon

本文关键字：图标 动画      更新时间：2023-09-26

假设我有一个像下面这样的下拉菜单：

http://jsfiddle.net/1fb9nqb1/

$('#toggle').click(function () {
    $('#dropdown').slideToggle();
    $('#opt-slide').toggleClass('open');
});
$('#dropdown > li').click(function () {
    $('#dropdown').slideUp();
    $('#opt-slide').removeClass('open');
});
* {
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
}
header {
    height:200px;
    background:#39F;
    z-index:4;
}
#opt-slide {
    width:300px;
}
#toggle {
    background:#099;
    display:block;
    height:50px;
    color:#FFF;
    line-height:50px;
    z-index:4;
}
#dropdown {
    background:#0C9;
    list-style:none;
    margin-top:0px;
    z-index:2;
    display:none;
}
#dropdown li {
    height:40px;
    line-height:40px;
}
#dropdown li:hover {
    background:#FAFAFA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="opt-slide"> <span id="toggle">OPTIONS</span>
    <ul id="dropdown">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
        <li>Option 5</li>
    </ul>
</div>

我怎么能像这个一样添加动画：

https://dribbble.com/shots/1621359-Open-Close-Icon-Animation支持菜单的展开/折叠？还有一件事，有没有办法在没有jQuery的情况下完成下拉菜单？

感谢

如果你选中这个JS Fiddle，你会看到我添加了两个跨度#s1和#s2，带有一个容器div#sign，跨度是旋转的45deg，但彼此相反，当菜单隐藏时，两个spans的位置表示箭头形状，如果你点击切换span，.class1和.class2分别添加到#s1和#s2中，这些类具有不同的margin-left值，使两个跨度形成带有过渡的X形，其中原始的margin-left valeus设置在带有过渡的每个跨度css中，使它们平滑地进出，而不是仅在css中跳跃，然而，你可以用jquery .animate()设置这些跨度的动画，也可以轻松地设置相同的值，但由于它可以用css完成，我会使用它：

第1版：注释后更改了代码，将div#sign更改为span#sign，并使其成为span#toggle的子级JS Fiddle 2

更新的代码：

$('#toggle').click(function() {
  $('#dropdown').slideToggle();
  $('#opt-slide').toggleClass('open');
  $('#sign #s1').toggleClass('close1');
  $('#sign #s2').toggleClass('close2');
});
$('#dropdown > li').click(function() {
  $('#dropdown').slideUp();
  $('#opt-slide').removeClass('open');
});
* {
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
}
header {
    height:200px;
    background:#39F;
    z-index:4;
}
#opt-slide {
    width:300px;
    position:relative;
}
#toggle {
    background:#099;
    display:block;
    height:50px;
    color:#FFF;
    line-height:50px;
    z-index:4;
    position:relative;
}
#dropdown {
    background:#0C9;
    list-style:none;
    margin-top:0px;
    z-index:2;
    display:none;
}
#dropdown li {
    height:40px;
    line-height:40px;
}
#dropdown li:hover {
    background:#FAFAFA;
}
#sign{
    width:50px;
    height:25px;
    display:inline-block;
    position:absolute;
    top:25px;
    right:10px;
}
#sign .s{
    width:25px;
    height:4px;
    display:inline-block;
    border-radius:2px;
    background-color:white;
    position:absolute;
}
#sign #s1{
    transform:rotate(45deg);
    z-index:100;
    margin-left:0;
    transition:all 0.5s ease-out;
}
#sign #s2{
    transform:rotate(-45deg);
    z-index:200;
    margin-left:16px;
    transition:all 0.5s ease-in;
}
#sign #s2.close2{
    margin-left:7px;
    transition:all 0.5s ease-out;
}
#sign #s1.close1{
    margin-left:7px;
    transition:all 0.5s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="opt-slide"> <span id="toggle">OPTIONS<span id="sign"><span id="s1" class="s"></span><span id="s2" class="s"></span></span>
  </span>
  <ul id="dropdown">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
  </ul>
</div>

相关文章：