Question

我正在尝试使用Javascript和CSS转换效果。假设我有2个DIV，一个不会显示（我称之为'hiddy'）而另一个（'showy'）将有1个按钮。当我按下那个按钮时，我想转换'showy'，然后显示'hiddy'，并创建一个不透明度为0的新DIV，它将覆盖'showy'，并且会有一个onclick函数，会导致'hiddy'无法显示' showy'返回它的初始状态，并删除我们创建的DIV。

我试图使用'showy'上的eventListener使用'propertyName === transform'和一个带有布尔'status'的if语句来执行此操作，但它不起作用。

第一次运行它时，它运行正常它会使用布尔值为true激活侦听器一次，进行转换并创建div，然后当您单击新div时，它会触发侦听器，其布尔值为false 。现在出现了问题，如果你再次点击按钮再次调用函数trans（），那么即使status在任何eventListener中没有改变它的值，监听器也会运行两次，当我们点击按钮时它会改变（它是初始化或设置为true）或当我们点击新div时（它变为false）。

感谢您的时间。

var iteration = 0;
function trans() {
  if(typeof status === 'undefined'){
    var status = true;
  }
  else {
    status = true;
  }

  var hiddy = document.getElementById('hiddy');
  hiddy.classList.add('active');
  var showy = document.getElementById('showy');
  showy.classList.add('transformRight');

  showy.addEventListener('transitionend', function(e) {
    if(e.propertyName === 'transform') {
      iteration++;
      console.log('Iteration number: '+iteration);
      console.log('Status value --> '+status);

      if (status) {
        console.log('Status was true');
        var meh = document.createElement('div');
        meh.id = 'layer';
        showy.appendChild(meh);
        layer = document.getElementById('layer');
        layer.classList.add('layer');
        layer.onclick = function () {
          status = false;
          showy.classList.remove('transformRight');
          showy.classList.add('transformLeft');
          showy.removeChild(layer);

        }
      }

      if (!status) {
        console.log('Status was false');
        hiddy.classList.remove('active');
        showy.classList.remove('transformLeft');
      }

    }
  },false);

}

var iteration = 0;
function trans() {
  if(typeof status === 'undefined'){
    var status = true;
  }
  else {
    status = true;
  }
  
  var hiddy = document.getElementById('hiddy');
  hiddy.classList.add('active');
  var showy = document.getElementById('showy');
  showy.classList.add('transformRight');
  
  showy.addEventListener('transitionend', function(e) {
    if(e.propertyName === 'transform') {
      iteration++;
      console.log('Iteration number: '+iteration);
      console.log('Status value --> '+status);
      
      if (status) {
        console.log('Status was true');
        var meh = document.createElement('div');
        meh.id = 'layer';
        showy.appendChild(meh);
        layer = document.getElementById('layer');
        layer.classList.add('layer');
        layer.onclick = function () {
          status = false;
          showy.classList.remove('transformRight');
          showy.classList.add('transformLeft');
          showy.removeChild(layer);
          
        }
      }
      
      if (!status) {
        console.log('Status was false');
        hiddy.classList.remove('active');
        showy.classList.remove('transformLeft');
      }
      
    }
  },false);
  
}

.showy {
  display:none;
  background-color: red;
  width: 200px;
  height: 200px;
  z-index: 3;
}

.showy.active {
  display:block;
}
 
.hiddy {
  display:none;
  background-color: blue;
  width: 200px;
  height: 200px;
  z-index: 1;
}

.hiddy.active {
  display:block;
}

.transformRight {
  transform: translate(50%);
  transition: transform 1s linear 0s;
}

.transformLeft {
  transform:translate(0%);
  transition: transform 1s linear 0s;
}

.layer {
  position: fixed;
  max-width: 100%;
  max-height: 100%;
  margin-left: 0px;
  top: 0px;
  height: 100vh;
  width: 100vw;
  z-index: 8;
  opacity: 0.4;
  background-color: yellow;
}

.active {
  display:block;
}

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div id="showy" class="showy active"><button type="button" onclick="trans()">Button</button></div>
    <div id="hiddy" class="hiddy"></div>

  </body>

</html>

Answer 1

好的，我找到了解决方案。

在完成后删除eventListener就可以了。

if (!status) {
    console.log('Status was false');
    hiddy.classList.remove('active');
    showy.classList.remove('transformLeft');
    showy.removeEventListener('transitionend', arguments.callee, false);
}

找到了如何从＆＃39; inside＆＃39;中删除eventListener。在这 post

使用boolean的eventListener运行两次（Javascript和CSS）

1 个答案: