切换类动画不恢复答案

【问题标题】：Toggled Class animation not reverting切换类动画不恢复
【发布时间】：2020-12-30 02:05:56
【问题描述】：

我试图理解为什么一旦关闭类，类转换的动画就不会播放。

这是我的codepen

$("div").click(function() {
  $(this).toggleClass("center");
});

div {
  width: 100%;
  background-color: tomato;
  margin: 10px;
  padding: 20px;
  font-family: Montserrat;
  text-transform: uppercase;
  transition: all 1s linear;
  top: 0%;
}

.center {
  position: absolute;
  background: red;
  top: 50%;
}

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

<nav>
  <div>some </div>
  <div>some other </div>
</nav>

当我点击一个 DIV 时，我希望它改变它的位置到屏幕的中心，并为这个过渡设置动画，这很有效，但是一旦我切换了类，这个 div 就会“捕捉”回原来的样子位置。为什么它没有动画回来？有办法吗？

谢谢

【问题讨论】：

您可能想改用.addClass() 和.removeClass()。这样，您可以使用两个类并删除一个 CSS 类名称并将其替换为另一个，这样您就可以将 DIV 动画化回原来的起点。

标签： jquery css

【解决方案1】：

一旦 div 失去position: absolute; 属性，绝对位置就会丢失。所以我建议你总是让它们绝对定位。下面，我使用了一个循环来设置它们的初始top 值...

$("div").click(function() {
  $(this).toggleClass("center");
});

// To position the divs onload...
$("div").each(function(index, elem) {
  $(elem).css("top", (index * 68) + "px")
})

div {
  position: absolute;
  width: 100%;
  background-color: tomato;
  margin: 10px;
  padding: 20px;
  font-family: Montserrat;
  text-transform: uppercase;
  transition: all 1s linear;
  /*   top:0%; */
}

.center {
  /*   position:absolute; */
  background: red;
  top: 50% !important;
}

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

<nav>
  <div>some </div>
  <div>some other </div>
</nav>

【讨论】：

【解决方案2】：

默认情况下，div 的位置设置为相对。 position:absolute; 和 position:relative; 之间的切换不能动画。你需要调整你的代码来为top 设置动画。

$( "div" ).click(function() {
  $(this).toggleClass( "center" );
});

div{
  width:100%;
  background-color:tomato;
  margin:10px;
  padding:20px;
  font-family:Montserrat;
  text-transform:uppercase;
  transition:all 1s linear;
  top:0%;
  position:absolute;
}
div:nth-child(1){
  top: 0%;
}
div:nth-child(2){
  top: 20%;
}

.center{
  background:red;
  top:50% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div>some </div>
  <div>some other </div>
</nav>

【讨论】：