我在悬停时使用'translate3d'和'transition'来将div移动到视图中。
这在悬停时正常工作,但在退出时,我希望它转换回视图之外。目前,它刚刚消失。
我尝试过的所有东西都不起作用,所以我希望有人能够指出我正在制造的明显错误?
看我的笔:
https://codepen.io/anon/pen/KeMxoB
这是CSS:
a.box-item {
position: relative;
display: block;
overflow: hidden;
}
a.box-item img {
opacity: 1;
transition: opacity 0.35s;
}
a.box-item .text {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
margin: 0;
opacity: 0;
transition: transform 0.35s;
transform: translate3d(0,100%,0);
}
a.box-item .text h2 {
color: #FFF;
font-weight: 100;
opacity: 0;
transition: opacity 0.35s;
transition-delay: 0.05s;
}
a.box-item:hover {
background: #000;
}
a.box-item:hover img {
opacity: 0.8;
}
a.box-item:hover .text {
opacity: 1;
transform: translate3d(0,0,0);
}
a.box-item:hover .text h2 {
opacity: 1;
}
答案 0 :(得分:3)
在
上使用"transition: all 0.35s;"
代替"transition: transform 0.35s;"
a.box-item .text {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
margin: 0;
opacity: 0;
transition: all 0.35s;
transform: translate3d(0,100%,0);
}
这会对你有帮助。
答案 1 :(得分:0)
在.text元素
上使用transition: transform 2s, opacity 1s 1s;
transition: transform 2s, opacity 1s 1s;
a.box-item .text {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
margin: 0;
opacity: 0;
transition: transform 2s, opacity 1s 1s;
transform: translate3d(0,100%,0);
}
答案 2 :(得分:0)
使用“过渡:所有0.35秒;”而不是“过渡:变换0.35s;”。它会起作用。
a.box-item .text {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
margin: 0;
opacity: 0;
transition: all 0.35s;
transform: translate3d(0,100%,0);
}