jquery - CSS动画-原始位置

这是一个简单的脚本，当您单击“单击此处”时，包含的DIV向上移动；当您单击“关闭”时，包含的div应该向下移动到原始位置。问题是关闭时出现闪烁，当我再次按下“单击此处”按钮时，原始位置被设置为低于闪烁的两倍。

function domove() {
  document.getElementById('infograph').className = 'move-up object areaflaot ';
} //end of funciton

function donomove() {
  document.getElementById('infograph').className = 'move-up object areaflaotdown ';
} //end of funciton

.areaflaot {
  position: absolute;
  top: 278px;
  z-index: 200;
}

.move-up {
  transform: translate(0, -270px);
  -webkit-transform: translate(0, -270px);
  /** Chrome & Safari **/
  -o-transform: translate(0, -270px);
  /** Opera **/
  -moz-transform: translate(0, -270px);
  /** Firefox **/
}

.object {
  posit ion: absolute;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  /** Chrome & Safari **/
  -moz-transition: all .3s ease-in-out;
  /** Firefox **/
  -o-transition: all .3s ease-in-out;
  /** Opera **/
}

.areaflaotdown {
  transform: translate(0, 270px);
  -webkit-transform: translate(0, 270px);
  /** Chrome & Safari **/
  -o-transform: translate(0, 270px);
  /** Opera **/
  -moz-transform: translate(0, 270px);
  /** Firefox **/
}

<div id="axis" class="one" style="width:200px;height:300px; background-color:#1F3234">
  <div class="object areaflaot " id="infograph" style="background-color:black;width:100px;height:100px;float:left; ">
    <div onclick="domove()" v style="color:white"> click here </div>
    <div onclick="donomove()" v style="color:white"> close </div>
  </div>

</div>

最佳答案

这是逻辑，因为您要删除/添加所有类，尤其是包含转换的类。相反，您可以考虑仅添加/删除所需的类。同样，初始位置不是translate(0, -270px)而是translate(0, 0)。这不是您认为的(270 + -270 = 0)附加值，而是一个设置，因此您可以设置最终值。

function domove() {
  document.getElementById('infograph').classList.add('move-up');
  document.getElementById('infograph').classList.remove('areaflaotdown');
} //end of funciton

function donomove() {
  document.getElementById('infograph').classList.remove('move-up');
  document.getElementById('infograph').classList.add('areaflaotdown');
} //end of funciton

.areaflaot {
  position: absolute;
  top: 278px;
  z-index: 200;
}

.move-up {
  transform: translate(0, -270px);
  -webkit-transform: translate(0, -270px);
  /** Chrome & Safari **/
  -o-transform: translate(0, -270px);
  /** Opera **/
  -moz-transform: translate(0, -270px);
  /** Firefox **/
}

.object {
  position: absolute;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  /** Chrome & Safari **/
  -moz-transition: all .3s ease-in-out;
  /** Firefox **/
  -o-transition: all .3s ease-in-out;
  /** Opera **/
}

.areaflaotdown {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  /** Chrome & Safari **/
  -o-transform: translate(0, 0);
  /** Opera **/
  -moz-transform: translate(0, 0);
  /** Firefox **/
}

<div id="axis" class="one" style="width:200px;height:300px; background-color:#1F3234">
  <div class="object areaflaot " id="infograph" style="background-color:black;width:100px;height:100px;float:left; ">
    <div onclick="domove()" style="color:white"> click here </div>
    <div onclick="donomove()" style="color:white"> close </div>
  </div>

</div>

您还可以像这样优化代码：

function domove() {
  document.getElementById('infograph').classList.add('move-up');
}
function donomove() {
  document.getElementById('infograph').classList.remove('move-up');
}

.areaflaot {
  position: absolute;
  top: 278px;
  z-index: 200;
}

.move-up {
  transform: translate(0, -270px);
}

.object {
  position: absolute;
  transition: all .3s ease-in-out;
}

<div id="axis" class="one" style="width:200px;height:300px; background-color:#1F3234">
  <div class="object areaflaot " id="infograph" style="background-color:black;width:100px;height:100px;float:left; ">
    <div onclick="domove()"  style="color:white"> click here </div>
    <div onclick="donomove()"  style="color:white"> close </div>
  </div>

</div>