Currently, I am working on animating cards using CSS and JavaScript. Everything seems to be working fine except for one issue – the class does not get removed on the second click on the element when using
this.classList.toggle('is-active');toggle method behave like add in this particular scenario?
window.addEventListener('load', function() {
const cardsList = document.querySelectorAll(".card");
for (let card of cardsList) {
card.addEventListener("click", function() {
for (let c of cardsList) {
c.classList.remove('is-active');
}
this.classList.toggle('is-active');
});
}
}).cards {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-auto-rows: 70vh;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
transition: 2s;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.card .card__title {
color: #fff;
position: relative;
z-index: 2;
}
.card__text {
position: absolute;
padding: 50px 100px;
font-size: 15px;
transform: translate(0px, 70vh);
transition: transform .5s ease 0s;
z-index: 2;
color: #fff;
}
.card:hover img {
transform: scale(1.2);
}
.card.is-active .card__text {
transform: translate(0px, 0px);
transition: transform .5s ease .5s;
top: 50%;
transform: translate(0, -50%);
}
.card:after {
content: "";
margin: 0;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
border-radius: 100%;
width: 0;
height: 0;
transition: all 1.3s;
}
.card.is-active:after {
width: max(100vh, 100vw);
height: max(100vh, 100vw);
}<div class="cards">
<div class="card">
<img src="https://d626yq9e83zk1.cloudfront.net/files/2017/12/26-770x425.jpg">
<div class="card__title">Lorem </div>
<div class="card__text">ipsum dolor sit, amet consectetur adipisicing elit. Itaque, nulla?</div>
</div>
<div class="card">
<img src="https://d626yq9e83zk1.cloudfront.net/files/2017/12/26-770x425.jpg" alt="">
<div class="card__title">Lorem </div>
<div class="card__text">ipsum dolor sit, amet consectetur adipisicing elit. Itaque, nulla? </div>
</div>
<div class="card">
<img src="https://d626yq9e83zk1.cloudfront.net/files/2017/12/26-770x425.jpg" alt="">
<div class="card__title">Lorem </div>
<div class="card__text">ipsum dolor sit, amet consectetur adipisicing elit. Itaque, nulla? </div>
</div>
</div>