html - 如何将上滑和下滑动画添加到可变高度 div?
问题描述
当我将鼠标悬停在 div 卡上时,我想添加上滑和下滑动画。
初始卡:
当我将鼠标悬停在卡片上时:
黄色部分应该向上滑动,当我移除悬停时它应该向下滑动直到它不可见。
我可以在悬停时显示和隐藏黄色部分,但我无法为其设置动画。我猜是因为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;
}
<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:http: //jsfiddle.net/JerryGoyal/63c8hbr5/
我对想法持开放态度,只要它只能用 CSS 来完成!
解决方案
你是对的,需要始终使用相同的位置技术。
你需要坚持到底,然后设置一个 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%);
}
<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>
推荐阅读
- python - 如何在scrapy运行之前手动进行身份验证?
- hbase - 数据驻留在 HDFS(HFile) 上时的 HBase 读取性能如何
- react-native - React -native ScrollView 水平滚动冲突
- android - 应用程序关闭时,带有广播接收器的工作管理器不起作用
- c# - 如何修复 RpcException:项目 new-project 不存在或不包含活动的 Cloud Datastore 或 Cloud Firestore 数据库
- kubernetes - 如何定义一些具有特定端口的 Kubernetes Ingress 路由
- python - Python 3:优化 Project Euler 问题 #14
- python - 从basketball-reference.com解析NBA赛季统计数据,如何删除html评论标签
- reactjs - 如何将 firebase 的 firestore/admin sdk 与 next.js 一起使用
- c++ - 如何优化这些正则表达式?