Question

我正在尝试做动画。此动画由一个Button（来自Bootstrap的glyphicon加号）和一个宽度为12％的Box-Content组成。当我们点击按钮时，它会旋转到负方向，同时打开Box-Content宽度：40％，animate（）是来自jQuery的自定义动画。现在我的问题是：我真的不知道，如何将Box-Content恢复到原始宽度，同时再次将按钮旋转到正方向。这是jQuery代码：

$(document).ready(function(){
    function showNav(){
        $('.glyphicon-plus-sign').toggleClass('animate-open-button');
        $('.wrapper').animate({
            width:'40%'
        },{
            queue:false,
            duration:3000
        })
        $('nav ul li a').css('opacity','1');
    }

    function hideNav(){
        $('.glyphicon-plus-sign').toggleClass('animate-close-button');
        $('.wrapper').animate({
            width:'12%'
        },{
            queue:false,
            duration:3000
        })
        $('nav ul li a').css('opacity','0');
    }

    $('.glyphicon-plus-sign').on('click', function(){
        // if (hideNav()) {
            showNav();
        // }else{
            // hideNav();
        // }
    });
})

动画的一些css样式：

.wrapper{
  width: 12%;
}
nav ul li a{
  opacity:0;
    -webkit-transition: opacity .80s ease;
}
.glyphicon-plus-sign.animate-close-button{
  animation: close linear 3s;
  animation-iteration-count: 1;
  -webkit-animation: close linear 3s;
  -webkit-animation-iteration-count: 1;

  -moz-animation: close linear 3s;
  -moz-animation-iteration-count: 1;

  -o-animation: close linear 3s;
  -o-animation-iteration-count: 1;

  -ms-animation: close linear 3s;
  -ms-animation-iteration-count: 1;
  -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
@keyframes close{
  0% {
    transform: rotate(-225deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-moz-keyframes close{
  0% {
    -moz-transform: rotate(-225deg);
  }
  100% {
    -moz-transform: rotate(0deg);
  }
}
@-webkit-keyframes close{
  0% {
    -webkit-transform: rotate(-225deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@-o-keyframes close{
  0% {
    -o-transform: rotate(-225deg);
  }
  100% {
    -o-transform: rotate(0deg);
  }
}

@-ms-keyframes close{
  0% {
    -ms-transform: rotate(-225deg);
  }
  100% {
    -ms-transform: rotate(0deg);
  }
}

.glyphicon-plus-sign.animate-open-button{
  font-size: 2.7em;
  animation: open linear 3s;
  animation-iteration-count: 1;
  -webkit-animation: open linear 3s;
  -webkit-animation-iteration-count: 1;

  -moz-animation: open linear 3s;
  -moz-animation-iteration-count: 1;

  -o-animation: open linear 3s;
  -o-animation-iteration-count: 1;

  -ms-animation: open linear 3s;
  -ms-animation-iteration-count: 1;
  -ms-transform: rotate(-225deg);
    -o-transform: rotate(-225deg);
 -webkit-transform: rotate(-225deg);
         transform: rotate(-225deg);
}

@keyframes open{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-225deg);
  }
}

@-moz-keyframes open{
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(-225deg);
  }
}

@-webkit-keyframes open{
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-225deg);
  }
}

@-o-keyframes open{
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(-225deg);
  }
}

@-ms-keyframes open{
  0% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(-225deg);
  }
}

这里是HTML：

<div class="wrapper container-fluid">
    <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>          
    <div class="col-xs-12 col-sm-12 col-md-12 main-nav">
        <nav>
            <ul>
                <li><a href="">site1</a></li>
                <li><a href="">site2</a></li>
                <li><a href="">site3</a></li>
                <li><a href="">site4</a></li>
            </ul>
        </nav>
    </div>
</div>

在这里你可以更好地看到这个动画，了解我的意思。链接：jsfiddle/Mobile-navigation或此处：codepen.io/Mobile-navigation我非常感谢每一个帮助。感谢的！

Answer 1

搜索它，我意识到hideNav（）函数添加了类“animate-close-button”，但没有删除类“animate-open-button”，因为toggleClass删除并添加了同一个类。因此，当hideNav（）函数触发时，这里的一个选项可能是添加removeClass（'animate-open-button'），如下所示：

function hideNav(){
    $('.glyphicon-plus-sign').removeClass('animate-open-button');
    $('.glyphicon-plus-sign').toggleClass('animate-close-button');
    ...

showNav（）同样如此：

function showNav(){
    $('.glyphicon-plus-sign').removeClass('animate-close-button');
    $('.glyphicon-plus-sign').toggleClass('animate-open-button');
    ...

现在点击，我们需要检查glyphicon是否有“animate-open-button”，或“animate-close-button”类：

$('.glyphicon-plus-sign').on('click', function(){
    if ($('.glyphicon-plus-sign').hasClass('animate-open-button')) {
        hideNav();
    }else{
        showNav();
    }
});

希望这有帮助，利奥。

使用jQuery和CSS同时为2个对象设置动画

1 个答案: