jquery - 进出动画有问题

Question

我制作了进入/退出动画，它使用了 CSS3 的 transition 属性和 jQuery 的 queues。

一个 div 在开始时可见，另一个 div 在开始时隐藏。

运行代码后，我看到退出很顺利，但是入口却没有发生。点击几下后，div 就会消失。

我希望两个动画每次点击都播放一次，先退出。

$(document).ready(function() {
  $(".side").click(function() {
    $(this).css("transform", "rotate(90deg)");
    $(this).css("opacity", "0");
    $(this).css("margin-left", "50px");
    $(this).delay(400).queue(function() {
        $(this).hide();
        var nextTarg = $($(this).attr("next-target"));
        nextTarg.show();
        nextTarg.css("transform", "rotate(0deg)");
        nextTarg.css("opacity", "1");
        nextTarg.css("margin-left", "1.5%");
      });
  });
});

.entrance {
  transition: 0.4s;
}
.box {
  height: 90px;
  width: 90px;
  background-color: violet;
  margin: 1.5%;
}
.different.box {
  background-color: blueviolet;
}
.hidden {
  display: none;
}
.hidden.side {
  transform: rotate(90deg);
  margin-left: 50px;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="side1" class="side entrance box" next-target="#side2"></div>
<div id="side2" class="different hidden side entrance box" next-target="#side1"></div>

Answer 1

稍微改变一下您的 jQuery 和 CSS 将帮助您实现这一点:

代码片段

$(document).ready(function() {
  $(".side").click(function() {
    $(this).css({
      'transform': 'rotate(90deg)',
      'opacity': 0,
      'margin-left': '50px',
    });
    $(this).delay(400).queue(function() {
      $(this).css({
        'visibility': 'hidden'
      });
      var nextTarg = $($(this).attr("next-target"));
      nextTarg.css({
        'visibility': 'visible',
        'transform': 'rotate(0deg)',
        'opacity': 1,
        'margin-left': '8px',
      });
    });
  });
});

.entrance {
  transition: 0.4s;
}
.parent {
  position: relative;
}
.box {
  height: 90px;
  width: 90px;
  background-color: violet;
  margin: 8px;
}
.different.box {
  background-color: blueviolet;
  position: absolute;
    left: 0px;
    top: -8px;
}
.hidden {
  visibility: hidden;
}
.hidden.side {
  transform: rotate(90deg);
  margin-left: 50px;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div id="side1" class="side entrance box" next-target="#side2"></div>
  <div id="side2" class="different hidden side entrance box" next-target="#side1"></div>
</div>