当我将鼠标悬停在div卡上时,我想添加上滑和下滑动画。
初始卡:
当我将鼠标悬停在卡片上时:
黄色部分 应 向上滑动 ,当我删除悬停时, < em>向下滑动 直到它不可见。
我可以在悬停时显示和隐藏黄色部分,但我无法动画它。我猜是因为top: 182px; bottom: auto;
(用于隐藏黄色部分并将紫色部分置于底部)和top:auto;bottom:0;
(以完全显示黄牌而不管它的高度)
以下是代码:
.card{
margin-right:20px;
display: inline-block;
padding: 0;
border-radius: 19px;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
overflow: hidden;
height: 200px;
background-color:#2196f3;
position:relative;
text-align:center;
}
.image{
padding:50px;
}
.content{
border-radius: 0 0 19px 19px;
background-color: #673AB7;
position: absolute;
width: 100%;
top: 182px;
bottom: auto;
}
.desc{
background-color:#ffeb3b;
}
.card:hover .content{
top: auto;
transition: all 2s ease;
bottom: 0px;
}
&#13;
<div class='card'>
fixed height card
<div class='image'>
fixed height image
</div>
<div class='content'>
<div class='title'>
fixed height title
</div>
<div class='desc'>
=:variable height description:= Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud the end.
</div>
</div>
</div>
<div class='card'>
fixed height card
<div class='image'>
fixed height image
</div>
<div class='content'>
<div class='title'>
fixed height title
</div>
<div class='desc'>
=:variable height description:= Lorem ipsum dolor sit amet, consectecing elit, sed do eiusmod tempor incididunt ut the end.
</div>
</div>
</div>
&#13;
在这里玩JSFiddle:http://jsfiddle.net/JerryGoyal/63c8hbr5/
只要只使用CSS就能完成创意!
答案 0 :(得分:3)
你是正确的,需要始终使用相同的位置技术。
你需要坚持到底,然后设置一个translateY
.card {
margin-right: 20px;
display: inline-block;
padding: 0;
border-radius: 19px;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
overflow: hidden;
height: 200px;
background-color: #2196f3;
position: relative;
text-align: center;
}
.image {
padding: 50px;
}
.content {
border-radius: 0 0 19px 19px;
background-color: #673AB7;
position: absolute;
width: 100%;
bottom: 18px;
transform: translateY(100%);
transition: all 2s ease;
}
.desc {
background-color: #ffeb3b;
}
.card:hover .content {
bottom: 0px;
transform: translateY(0%);
}
&#13;
<div class='card'>
fixed height card
<div class='image'>
fixed height image
</div>
<div class='content'>
<div class='title'>
fixed height title
</div>
<div class='desc'>
=:variable height description:= Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud the end.
</div>
</div>
</div>
<div class='card'>
fixed height card
<div class='image'>
fixed height image
</div>
<div class='content'>
<div class='title'>
fixed height title
</div>
<div class='desc'>
=:variable height description:= Lorem ipsum dolor sit amet, consectecing elit, sed do eiusmod tempor incididunt ut the end.
</div>
</div>
</div>
&#13;
答案 1 :(得分:1)
将转换更改为desc
div而不是content
。转换也不适用于auto
财产。尝试使用我已经显示的max-height属性。最大高度应该是你的div可以达到的非常大的高度。
更新了CSS
.card {
margin-right: 20px;
display: inline-block;
padding: 0;
border-radius: 19px;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
overflow: hidden;
height: 200px;
background-color: #2196f3;
position: relative;
text-align: center;
}
.image {
padding: 50px;
}
.content {
border-radius: 0 0 19px 19px;
background-color: #673AB7;
position: absolute;
width: 100%;
bottom: 0;
}
.desc {
background-color: #ffeb3b;
max-height: 0;
transition: all 2s ease;
}
.card:hover .desc {
max-height: 500px;
}
.card {
margin-right: 20px;
display: inline-block;
padding: 0;
border-radius: 19px;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
overflow: hidden;
height: 200px;
background-color: #2196f3;
position: relative;
text-align: center;
}
.image {
padding: 50px;
}
.content {
border-radius: 0 0 19px 19px;
background-color: #673AB7;
position: absolute;
width: 100%;
bottom: 0;
}
.desc {
background-color: #ffeb3b;
max-height: 0;
transition: all 2s ease;
}
.card:hover .desc {
max-height: 500px;
}
&#13;
<div class='card'>
fixed height card
<div class='image'>
fixed height image
</div>
<div class='content'>
<div class='title'>
fixed height title
</div>
<div class='desc'>
=:variable height description:= Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud the end.
</div>
</div>
</div>
<div class='card'>
fixed height card
<div class='image'>
fixed height image
</div>
<div class='content'>
<div class='title'>
fixed height title
</div>
<div class='desc'>
=:variable height description:= Lorem ipsum dolor sit amet, consectecing elit, sed do eiusmod tempor incididunt ut the end.
</div>
</div>
</div>
&#13;
答案 2 :(得分:0)
您可以使用关键帧在悬停内容上添加动画。
.card{
margin-right:20px;
display: inline-block;
padding: 0;
border-radius: 19px;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
overflow: hidden;
height: 200px;
background-color:#2196f3;
position:relative;
text-align:center;
}
.image{
padding:50px;
}
.content{
border-radius: 0 0 19px 19px;
background-color: #673AB7;
position: absolute;
width: 100%;
top: 182px;
bottom: auto;
animation-name: slideFromTop;
-webkit-animation-name: slideFromTop;
animation-duration: 800ms;
-webkit-animation-duration: 800ms;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.desc{
background-color:#ffeb3b;
}
.card:hover .content{
top: auto;
bottom: 0px;
animation-name: slideFromBottom;
-webkit-animation-name: slideFromBottom;
animation-duration: 800ms;
-webkit-animation-duration: 800ms;
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
@keyframes slideFromBottom {
0%{
opacity:0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
display: block;
}
}
@keyframes slideFromTop {
0%{
opacity:1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100%{
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(400%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
}
<div class='card'>
fixed height card
<div class='image'>
fixed height image
</div>
<div class='content'>
<div class='title'>
fixed height title
</div>
<div class='desc'>
=:variable height description:= Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud the end.
</div>
</div>
</div>
<div class='card'>
fixed height card
<div class='image'>
fixed height image
</div>
<div class='content'>
<div class='title'>
fixed height title
</div>
<div class='desc'>
=:variable height description:= Lorem ipsum dolor sit amet, consectecing elit, sed do eiusmod tempor incididunt ut the end.
</div>
</div>
</div>
您可以查看此JSFiddle
的链接希望它能帮助你!
干杯!