Question

这是一个简单的脚本，当您单击＆＃34;单击此处＆＃34;时，当您单击＆＃34;关闭＆＃34;时，包含的DIV会向上移动。包含div应该向下移动到原始位置。问题是关闭时有闪烁，当我按下＆＃34;点击此处时，原始位置设置为低于闪烁的两倍。按钮再次。

＆＃13;

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

＆＃13;

.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 **/
}

＆＃13;

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

＆＃13;

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>

CSS动画 - 原创位置

1 个答案: