我实现了 div 的翻转卡片,当用户将鼠标悬停在 div 上时效果很好,但是当他们将鼠标悬停在 div 上时它不会取消翻转,而是直接回到原来的方式,不提供平稳过渡回来。
任何人都可以帮助在用户将鼠标悬停在 div 上之前从翻转卡片平滑过渡回其原始外观。
请看下面的代码。
此外,here is a jsfiddle使问题更清楚。
CSS
.wrapper {
position: relative;
width: 200px;
height: 200px;
margin: 0 0 20px;
}
.background-out,
.background-over {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.background-info {
position: absolute;
left: 200px;
top: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0.2;
transform-origin: 0% 50% 0px;
transform: rotateY(-90deg);
background-color: grey;
}
.background-info .text {
padding: 5px;
}
.background-out {
background-color: red;
}
.background-over {
background-color: green;
visibility: hidden;
opacity: 0;
transform-origin: 100% 50% 0px;
transform: rotateY(-90deg);
}
.wrapper:hover .background-out {
visibility: hidden;
}
.wrapper:hover .background-over,
.wrapper:hover .background-info {
transform: translate3d(0px,0px,0px) rotateY(0deg);
transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,
-moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,
-webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
visibility: visible;
opacity: 1;
}
html
<div class="wrapper">
<div class="background-out"></div>
<div class="background-over"></div>
<div class="background-info">
<div class="text">Text 1</div>
</div>
</div>
最佳答案
您还应该将过渡属性不仅添加到 :hover,还应该添加到 html 元素本身。
CSS
.wrapper {
position: relative;
width: 200px;
height: 200px;
margin: 0 0 20px;
}
.background-out,
.background-over {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.background-out,
.background-over,
.background-info {
transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
}
.background-info {
position: absolute;
left: 200px;
top: 0;
width: 100%;
height: 100%;
opacity: 0.2;
transform-origin: 0% 50% 0px;
transform: rotateY(-90deg);
background-color: grey;
}
.background-info .text {
padding: 5px;
}
.background-out {
}
.background-over {
background-color: green;
opacity: 0;
transform-origin: 100% 50% 0px;
transform: rotateY(-90deg);
}
.wrapper:hover .background-out {
}
.wrapper:hover .background-over,
.wrapper:hover .background-info {
transform: translate3d(0px, 0px, 0px) rotateY(0deg);
transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
opacity: 1;
}
HTML
<div class="wrapper">
<div class="background-out"></div>
<div class="background-over"></div>
<div class="background-info">
<div class="text">Text 1</div>
</div>
</div>
关于javascript - 目录卡片。悬停时翻转,当用户发现时取消翻转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37902245/