入口和出口动画都是闪闪发光的

Question

我制作了入口/出口动画，它使用CSS3的transition属性和jQuery的queue s。

一个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>