【发布时间】：2018-03-31 02:14:58
【问题描述】：
我有一个 div 容器，当我将鼠标悬停在这个容器上时，我通过将第二个 div 的不透明度从 0 更改为 1 在我的容器顶部显示另一个 div。当我单击第二个 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;
}
【问题讨论】：
标签： html css css-transitions css-animations