动画类切换/元素交换

Question

我编写了一个函数，当单击时（隐藏一个div并显示另一个div），将“菜单”按钮替换为“关闭”按钮，反之亦然。 我正在努力为每个交换的切换添加动画。

这就是我所拥有的：

$(document).ready(function() {
  $('#menu-button').on('click', function() {
    $('#menu-button').toggleClass('inactive', 1000);
    $('#close-button').toggleClass('inactive', 1000).toggleClass('active', 1000);
  });

  $('.close-trigger').on('click', function() {
    $('#close-button').toggleClass('active').toggleClass('inactive', 1000);
    $('#menu-button').toggleClass('inactive', 1000).toggleClass('active', 1000);
  });
});

我也尝试了fadeIn / fadeOut / fadeToggle而不是toggleClass 。 fadeToggle的问题在于，两个元素会短暂同时出现，并且仍然没有淡入淡出动画。 有更好的编程方法吗？

Answer 1

toggleClass()不允许动画。 第二个参数不是时间。 参见文档：

http://api.jquery.com/toggleclass/

我想最适合您的是CSS过渡：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

如果您不想使用过渡，那就可以做：

  $('#menu-button').on('click', function() {
    $('#menu-button').hide();
    $('#close-button').fadeIn();
  });

  $('.close-trigger').on('click', function() {
    $('#close-button').hide();
    $('#menu-button').fadeIn();
  });

Answer 2

请尝试这个

 $(document).ready(function() { $('#button1').on('click', function() { $('#button1').hide(); $('#button2').show().addClass('toggle'); }); $('#button2').on('click', function() { $('#button2').hide(); $('#button1').show().addClass('toggle'); }); }); 

 #button2 { display:none; } .button.toggle { opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 2s; } @keyframes fadeInOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <button id="button1" class="button" >button1</button> <button id="button2" class="button" >button2</button> 

Answer 3

如果要使用toggleClass ，则必须在样式表中将其与CSS过渡一起使用。 否则，该元素将消失，因为toggleClass本身不提供动画。

CSS过渡很容易添加到样式表中，所需要做的就是将这些属性放在类的规则上：

transition-property: all;
transition-duration: 0.5s; /* or however long you need it to be */

请记住，不能对诸如display属性进行动画处理，因此您必须使用诸如opacity的属性来控制外观，因为它是数字，因此可以对其进行动画处理。