0
私はdivコンテナを持っていますが、このコンテナにマウスカーソルを合わせると、2番目のdivの不透明度を0から1に変更することによって別のdivを表示します。私は2番目の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：ホバー;アニメーション全体を強制する]（https://stackoverflow.com/questions/7694323/css3-animation-on-hover-force-entire-animation） – cometguy