I got a problem in my code, may someone knows the solution.
I create some cards and i wanted that when i click on one of them a new bigger card appear above. I did it easily with a for loop but the problem is the transition, I'd like to set a smooth transition.
The initial state of the bigger card is display: none; and opacity: 0;
I know we can't fade a display none element, but my idea was to set first a display: block and then opacity: 1 with a transition property in css in the "card-open" elements.
But the transition doesn't work and it makes my crazy because i don't know why
I share the codepen link here : https://codepen.io/arnaudhrt/pen/VwWBLze
and the javascript code :
const Card = document.querySelectorAll('.card')
const CardOpen = document.querySelectorAll('.card-open')
const btnClose = document.querySelectorAll('.close')
for(let i = 0 ; i < Card.length ; i++) {
Card[i].addEventListener('click', function() {
CardOpen[i].style.display = 'block'
CardOpen[i].style.opacity = '1'
});
btnClose[i].addEventListener('click', () => {
CardOpen[i].style.opacity = '0'
CardOpen[i].style.display = 'none'
})
}
PS: I can't set display block and just toggle the opacity because if i do that i couldn't use the other cards with the z-index.
you can use visibility instead display, display don't have transition effects in css.
const Card = document.querySelectorAll('.card')
const CardOpen = document.querySelectorAll('.card-open')
const btnClose = document.querySelectorAll('.close')
for(let i = 0 ; i < Card.length ; i++) {
Card[i].addEventListener('click', function() {
CardOpen[i].style.visibility = 'visible'
CardOpen[i].style.opacity = '1'
});
btnClose[i].addEventListener('click', () => {
CardOpen[i].style.opacity = '0'
CardOpen[i].style.visibility = 'hidden'
})
}body {
background: #565279;
width: 100vw;
height: 100vh;
display: flex;
}
.container-card {
max-width: 1200px;
margin: auto;
display: flex;
flex-wrap: wrap;
align-content: center;
position: relative;
transition: all 0.4s ease-in-out;
}
.card {
width: 200px;
height: 200px;
background: crimson;
margin: 20px;
cursor: pointer;
transition: all 0.4s ease-in-out;
}
.card-open {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #333;
visibility: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
}
.card-open span {
color: #fff;
position: absolute;
bottom: 30px;
left: 50%;
transform:translateX(-50%);
cursor: pointer;
}<div class="container-card">
<div class="card card1"></div>
<div class="card card2"></div>
<div class="card card3"></div>
<div class="card card4"></div>
<div class="card card5"></div>
<div class="card card6"></div>
<div class="card card7"></div>
<div class="card card8"></div>
<div class="card card9"></div>
<div class="card card10"></div>
<div class="card-open open1"><span class="close">close</span></div>
<div class="card-open open2"><span class="close">close</span></div>
<div class="card-open open3"><span class="close">close</span></div>
<div class="card-open open4"><span class="close">close</span></div>
<div class="card-open open5"><span class="close">close</span></div>
<div class="card-open open6"><span class="close">close</span></div>
<div class="card-open open7"><span class="close">close</span></div>
<div class="card-open open8"><span class="close">close</span></div>
<div class="card-open open9"><span class="close">close</span></div>
<div class="card-open open10"><span class="close">close</span></div>
</div>