如何在悬停时从上到下动画对齐？答案

【问题标题】：How to animate alignment from top to bottom on hover?如何在悬停时从上到下动画对齐？
【发布时间】：2019-08-05 02:00:02
【问题描述】：

我正在寻找一种使用 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(); 但据我所知，这只适用于百分比和像素。

目标是让它在悬停时从上到下对齐。

（输入这个让我想到另一件事。这在移动设备上没用，对吧？:)）

【问题讨论】：

在移动设备中，点击动作会触发悬停状态
您有一个错误，第二个 .my_container > .my_content 块中缺少一个点。而且我没有看到任何:hover。这是真正的 CSS 吗？
如你所说，它只适用于px or %，不适用于auto。也许你可以使用 jQuery？
@Duannx，那太好了
@MrLister, :) 是的，忘记了:hover。这是我的代码的简化版本是的

标签： html css css-transitions css-animations

【解决方案1】：

如果子元素和父元素之间存在已知关系，您可以轻松应用翻译。

这是一个基本的例子

.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>

【讨论】：

哇，太甜了。不过有一件事，我在自己对此事的解释中发现了一个巨大的错误。内部内容具有可变高度。这取决于每个网格项目的文本长度。
@Tim 我知道 ;) 我只是提供了一个解决方案，以防您使用百分比设置高度，因为我认为纯 CSS 没有简单的通用解决方案
是的，我虽然是这样。那么我将使用jquery。有了它，我还可以考虑不同设备上的条件行为。
:) 我没有看到您的编辑。好的。干净整洁。我喜欢。谢谢！非常详尽。

【解决方案2】：

这是我的jQuery 方法。它比较容器和内容的大小。如果它比容器大，它会将差异设置为动画，因此所有内容都可见。

var $ = jQuery;

$(document).ready(function () {

    $('.post_grid_item').hover(

        function() {

            $containter = $(this).find('.content_slide');
            $content = $(this).find('.content_slide > .vce-row-content');

            $content_height    = $content.outerHeight();
            $containter_height = $containter.outerHeight() ;

            // if content is bigger than container
            if( $content_height >  $containter_height ) {

                $content_hover_offset = $containter_height - $content_height;

                $content.animate({
                    top: $content_hover_offset + 'px',
                }, 'fast');
            }

        },function() {

            $containter = $(this).find('.content_slide');
            $content = $(this).find('.content_slide > .vce-row-content');

            $content.animate({
                top: '0',
            },'fast');
        }
    );


});

在添加特定的移动设备条件时，这会给我更多的条件灵活性。

如果有人看到一些改进，请告诉我。

【讨论】：