展开 div 以缓和弹跳动画

Question

我隐藏 div 元素以扩展另一个 div 区域。我只想替换 'transition: width .3s ease-out; 'with' easeoutbounce 'with jquery，这是我的 fiddle。我应该从以下代码中添加/更改什么？

(function() {
var page = document.body,
    btn = document.getElementById('expmain');
btn.onclick = function() {
    page.className = (/(^| )main-visible( |$)/.test(page.className)) ?
        page.className.replace(/main-visible/,"") :
            page.className + " main-visible";
    // Toggle the toggle navigation title too...
    this.title = (this.title == "expand!") ?
        "back!" :
            "expand!";

    return false;
};
})();

Answer 1

这是 easyOutBounce 的工作示例代码：

https://jsfiddle.net/newzy08/xpvt214o/372035/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3.2/jquery.easing.js"></script>

<div id="tester" style="display: none;"></div>

<script language="Javascript">
    $( document ).ready(function() {
        $('#tester').slideToggle(1000,'easeOutBounce');
    });
</script>

<style>
    #tester {
        background-color: #900;
        height: 300px;
        width: 300px;
    }
</style>

我正在寻找如何与您的代码混合使用:-)

Answer 2

这是带有您的代码的 easeOutBounce 动画。我将 "back" 和 "expand" 触发的动画分开，这样你以后可以让它们有单独的动画。

(function() {
 var page = document.body,
  btn = document.getElementById('expmain');
 btn.onclick = function() {
  page.className = (/(^| )main-visible( |$)/.test(page.className)) ?
   page.className.replace(/main-visible/,"") :
    page.className + " main-visible";
        
  // Toggle the toggle navigation title too...
  this.title = (this.title == "expand!") ?
   "back!" :
    "expand!";

  return false;

 };
  
  //the animation for when you click 'expand'
  $(".open").on("click", function(){
   $(".left-sec").animate({width:"100%"},300, 'easeOutBounce');
  });
  //the animation for when you click 'back'
  $(".close").on("click", function(){
   $(".left-sec").animate({width:"83%"},300, 'easeOutBounce');
  });

})();

a{color: #fff}
.left-sec {
  background: blue;
    float: right;
    overflow: hidden;
    /*transition: width 0.3s ease-out 0s;*/
    width: 83%;
    height: 120px;
}

#navigasi {display: block; background: black}

#time {
   height: 120px;
  background: yellow;
    float: left;
    overflow: hidden;
    padding: 2%;
    width: 13%;
}
#post {
    line-height: 120px;
    text-align: center;
}
.close {display: none}
.main-visible .open{display: none}
.main-visible .close{display: inline}
/*.main-visible .left-sec{width: 100%;}*/
.main-visible #time{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3.2/jquery.easing.js"></script>
<div class="left-sec">
  <div id="navigasi">
    <a id="expmain" title="expand!" href=".left-sec">
     <span class="open">expand</span>
     <span class="close">back</span>
    </a>
  </div>
<div id="post">1234567</div>
</div>

<div id="time"/>

展开 div 以缓和弹跳动画

expand div with easing bounce animation

jquery

jquery-animate

jquery-easing