CODEWITHSUNDEEP
javascripthtmlcssanimation
Laczkó Örs
Laczkó Örs

Reputation: 1118

How to apply animation to an element when displayed?

I'm using a div to contain 3 sets of images. I have a back and a next button with which the user can navigate between the images.

My HTML:

<div class="imgs">
        <button>Back</button>
        <div class="conatiner">
            <div class="img-holder-1">
                <img src="#" alt="#" />
                <img src="#" alt="#" />
                <img src="#" alt="#" />
            </div>
            <div class="img-holder-1">
                <img src="#" alt="#" />
                <img src="#" alt="#" />
                <img src="#" alt="#" />
            </div>
            <div class="img-holder-1">
                <img src="#" alt="#" />
                <img src="#" alt="#" />
                <img src="#" alt="#" /> 
            </div>
        </div>
        <button>Next</button>
    </div>

My CSS:

.imgs{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.container > div {
    display: none;
}

.container > .displayed{
    display: grid;
    grid-auto-columns: 1fr 1fr 1fr;
}

.container > .displayed > img{
    width: 40px;
    height: 40px;
    border: 2px solid red;
}

The way how it works is that I have some JavaScript which ads the .displayed class to the displayed set of images. I want to achieve that when the class change happens one of the divs fades out and the other fades in so it will be more smooth. Is there a way to do this with CSS animations? Or how should I achieve this result?

Upvotes: 0

Views: 80

Answers (1)

Pedro Figueiredo
Pedro Figueiredo

Reputation: 2452

You should try using animation with @keyframes since that, will make an animation every time a element goes from hidden to displayed, as you as want.

Try something around this:

const images = document.querySelector(".container > .img-holder-1 ");

document.querySelector("#back").addEventListener('click', function() { images.classList.toggle('displayed'); });
.imgs{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.container > div {
    display: none;
}

.container > .displayed{
    display: grid;
    grid-auto-columns: 1fr 1fr 1fr;
    opacity:0;
    animation:fade-in 1s forwards;
}

.container > .displayed > img{
    width: 40px;
    height: 40px;
    border: 2px solid red;
}

@keyframes fade-in{
  from{
    opacity: 0;
  }
  to{
    opacity:1;
  }
}
<div class="imgs">
        <button id="back">Toggle Class</button>
        <div class="container">
            <div class="img-holder-1 displayed">
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
            </div>
            <div class="img-holder-1">
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
            </div>
            <div class="img-holder-1">
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" /> 
            </div>
        </div>
    </div>

Click on "Toggle Class" to see the fade-in effect.

Upvotes: 1

Related Questions