CODEWITHSUNDEEP
htmlcsscss-transitionscss-animations
CraZyDroiD
CraZyDroiD

Reputation: 7105

Keeping the transition even when the hover state is gone

I have a div container and when i hover on this container, i'm displaying another div on top my container by changing the opacity of the second div from 0 to 1. When i click on the second div (which appeared when hovering my container), i'm doing an animation. The problem i'm facing is, when the animation starts and at that same time if i move the mouse pointer away from my container, the animation also disappears without completing the animation. How can i keep the animation till it completes if i move the mouse pointer away from the container after clicking on it.

My container

<div key={index} className='vote_img_div active_imgvote_border'>


    <div className="vote_img unchange_div">

            //contents

    </div>


    <div onClick={() => this.handleClick(content.post_poll_content_id)}
         className={((this.state.voted_id === content.post_poll_content_id && this.state.active) ? 'vote_card_hover active' : 'vote_card_hover')}>


    </div>

</div>

My css

.vote_img_div {

    width: 292.5px;
    display: inline-block;
    margin-left: 8.25px;
    margin-bottom: 5px;
    overflow: hidden;
    position: relative;
    background-color: whitesmoke;
    transition: all .2s ease-in-out;

}

.vote_img {

    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;

}

.vote_card_hover {

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    opacity: 0;
    transition: .3s ease;
    background: rgba(0, 0, 0, .70);

}

.vote_card_hover:before {

    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 500px;
    height: 500px;
    background: rgba(0, 111, 147, 0.70);
    transition: transform 0.8s ease;
    border-radius: 50%;

}

.vote_card_hover.active:before {

    transform: translate(-50%, -50%) scale(1);

}

.vote_img_div:hover .vote_card_hover {
    opacity: 1;
    cursor: pointer;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0, 0, 0);


}

.active {
    background: rgba(103, 173, 237, 0.7);
    color: #FFFFFF;

}

Upvotes: 0

Views: 229

Answers (2)

Paweł Ćmachowski
Paweł Ćmachowski

Reputation: 11

You need to set animation-fill-mode to forwards, if you want keep animation state.

You can also use shorthand like there - https://github.com/cmachu/ewok/

Upvotes: 1

Rafael Oliveira
Rafael Oliveira

Reputation: 278

This is how regular hover is supposed to act. If you want the element to change permanently, remove the .vote_img_div:hover from your css and just redefine your element class using onclick event, which you're already doing. The transition attribute makes sure it moves, but when the mouse leaves the animation will be finished nevertheless and new class maintained.

Upvotes: 0

Related Questions