CSS 动画 - 原点位置

Question

这是一个简单的脚本，当您单击“单击此处”时，包含的 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>

Answer 1

这是逻辑，因为您要删除/添加所有类，尤其是包含转换的类。相反，您可以考虑仅添加/删除所需的类。初始位置也不是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>