javascript - 动画 onClick - Jquery

Question

这可能是个愚蠢的问题，但如果你有一个函数 onClick通过从 display: none 移动使模态出现至 display: block , 是否可以只对过渡的一部分进行动画处理。我的意思是当它是 display:block 时，你能让它“立即”出现吗？然后 fade-out因为它被移出了屏幕？

请参阅下面的代码段示例

$(function(){
  $('.square').click(function() {
    $('.modal').toggleClass('showModal');
  });
});

.square {
  height: 50px;
  width: 50px;
  border: 1px solid;
  content: '';
}

.modal {
  height: 400px;
  width: 400px;
  background-color: #f1f1f1;
  display: none;
}

.showModal {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>
<div class="modal"></div>

Answer 1

是的，你可以。只需检查它当前是否显示。如果是 - 使用动画。如果没有 - 立即采取行动。

$(document).ready(function() {
  $('button').click(function() {
    if ($('#div').hasClass('active')) {
      $('#div').slideUp(function() {
        $('#div').removeClass('active').show();
      });
    } else {
      $('#div').addClass('active');
    }
  })
})

#div {
  height: 0;
  background-color: blue;
}

#div.active {
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle</button>
<div id="div"></div>