0
div 컨테이너가 있고이 컨테이너에 마우스를 올려 놓으면 두 번째 div의 불투명도를 0에서 1로 변경하여 다른 컨테이너를 맨 위에 표시하고 있습니다. 두 번째 div (내 컨테이너를 가리키면 나타남)를 클릭하고 애니메이션을하고 있습니다. 내가 직면하고있는 문제는 애니메이션이 시작될 때 동시에 마우스 포인터를 컨테이너에서 멀리 떨어 뜨리면 애니메이션을 완료하지 않고도 애니메이션이 사라지는 것입니다. 그것을 클릭 한 후 마우스 포인터를 컨테이너에서 멀리 떨어 뜨리면 애니메이션이 완료 될 때까지 애니메이션을 유지할 수 있습니다.호버 상태가 사라져도 전환 유지
내 컨테이너
<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>
내 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;
}
[사용 가능한 복제 (https://stackoverflow.com/questions/7694323/css3-animation-on-hover-force-entire-animation) – cometguy
가능한 중복 -
당신은 또한이 같은 속기를 사용할 수 있습니다 [css3 animation on : hover; 강제 전체 애니메이션] (https://stackoverflow.com/questions/7694323/css3-animation-on-hover-force-entire-animation) – cometguy