I'm trying to make an effect using Javascript and CSS transform. Let's say I have 2 DIVs, one won't be displayed (I'll call it 'hiddy') and the other ('showy') will have 1 button. When I press that button I want to transform 'showy', then show 'hiddy', and create a new DIV with opacity 0 that will cover 'showy' and will have an onclick function that will cause 'hiddy' to not display and 'showy' to return to it's initial state, and delete the DIV we created.
I was trying to do this using an eventListener on 'showy' using 'propertyName === transform' and an if statement with a boolean 'status', but it is not working.
The first time you run it, it works just fine it does activate the listener once with the boolean at true, does the transformation and creates the div, then when you click on the new div it triggers the listener with boolean at false. The problem comes now, if you click on the button again which should call the function trans() again, the listener will run twice even though status doesn't change its value in any eventListener, it changes when we click on the button (it's initialized or set to true) or when we click on the new div (it changes to false).
Thank you for your time.
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>
