html - 如何在悬停时从上到下动画对齐?
问题描述
我正在寻找一种使用 CSS 为悬停过渡设置动画的方法。我希望保持纯CSS。如果没有,我将使用 jquery 作为备份。
这将是我的目标:
带有内容 div 的容器。当悬停时它会动画/向上滑动。如图所示:
我试过类似下面的代码。问题是过渡不会为该auto
部分设置动画。内容具有可变高度。所以每次都不一样。(每个网格项目)
.my_container{
position: relative;
width: 100%;
padding-top: 160%;
overflow: hidden;
}
.my_container > .my_content{
position: absolute;
top: 0;
bottom: auto;
left: 0;
right: 0;
}
.my_container > my_content:hover{
top: auto;
bottom: 0;
}
.my_container * {
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
我想过transform: translateY();
但据我所知,这只适用于百分比和像素。
目标是让它在悬停时从上到下对齐。
(打字让我想到了另一件事。这在移动设备上没用,对吧?:))
解决方案
如果子元素和父元素之间存在已知关系,您可以轻松应用翻译。
这是一个基本示例
.box {
height:100px;
width:50px;
margin:50px;
border:3px solid;
position:relative;
}
.box:before {
content:"";
position:absolute;
top:0;
width:100%;
height:143%;
background:red;
transition:1s all;
}
.box:hover::before {
transform:translateY(-30%)
/* 143% is 100%
100% is X% ---> X = 70% so we move by (100% - 70%)
*/
}
<div class="box">
</div>
你可以用一个 CSS 变量来表达:
.box {
height:100px;
width:50px;
margin:50px;
display:inline-block;
border:3px solid;
position:relative;
}
.box:before {
content:"";
position:absolute;
top:0;
width:100%;
height:calc(var(--p)*1%);
background:red;
transition:1s all;
}
.box:hover::before {
transform:translateY(calc((10000/var(--p))*1% - 100%))
}
<div class="box" style="--p:143;">
</div>
<div class="box" style="--p:170;">
</div>
<div class="box" style="--p:120;">
</div>
更新
如果是动态内容,您可以添加如下的小 JS 代码:
$('.box').each(function() {
var h0 = $(this).height();
var h1 = $(this).find('span').height();
$(this).css('--t',(h0-h1));
})
.box {
height: 100px;
width: 50px;
margin: 50px;
display: inline-block;
border: 3px solid;
position: relative;
}
.box span {
position: absolute;
top: 0;
width: 100%;
background: red;
transition: 1s all;
}
.box:hover span{
transform: translateY(var(--t));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est ex, pretium tempus turpis vitae, </span>
</div>
<div class="box">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="box">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est ex, pretium </span>
</div>
推荐阅读
- java - Java中的实现层
- php - 我什么时候应该创建不同尺寸的替代图像?
- asp.net-mvc - 如何将剑道下拉列表绑定到模型属性?
- javascript - Material-UI 表溢出其表包装器
- javascript - 是否可以在类位于 Angular 6 组件内部的应用程序组件上使用 [ngClass]?
- scala - 如何在Scala中使用if else为List的元素分配新值
- javascript - 无法使用 result.send 将结果返回给浏览器?
- android - 无法在 Android Studio 中重建项目和构建 APK
- xcode - Is there any way to get a USDZ file without a Mac?
- sql-server - SQL.fetchall() fails with the SQLState 24000 (Invalid cursor state) with Python