从容器底部到顶部的转换 div 位置 [重复]答案

【问题标题】：Transition div position from bottom to top of container [duplicate]从容器底部到顶部的转换 div 位置 [重复]
【发布时间】：2020-02-03 11:03:46
【问题描述】：

我试图让一个（绝对定位的）div 从底部过渡到顶部：0 的父 div。例如，我可以很高兴地让它从底部过渡到底部：0 到底部：10rem，但不是顶部：0。任何想法吗？请参阅下面的代码示例并提前致谢！

        .container {
            position: relative;
            height: 20rem;
            width: 20rem;
            border: solid blue 0.05rem;
        }

        .child {
            position: absolute;
            display: inline-block;
            height: 5rem;
            width: 5rem;
            background-color: red;
            bottom: 0;
            top: auto;
            transition: all 1s;
        }

        .child:hover {
            top: 0;
            bottom: auto;
        }

<div class="container">
  <div class="child"></div>
</div>

【问题讨论】：

需要指出的一点，当前答案中缺少：您只能从一个值转换到另一个。您不能从一个 property 的值转换到另一个 property 的值。这意味着您无法从bottom: 0 转换为top: 0。相反，您必须从一个 top 值转换为另一个 @Gildas answer

标签： css css-position css-transitions

【解决方案1】：

使用calc() CSS function，然后使用:hover 父级而不是child。

 .container {
            position: relative;
            height: 20rem;
            width: 20rem;
            border: solid blue 0.05rem;
        }

        .child {
            position: absolute;
            display: inline-block;
            height: 5rem;
            width: 5rem;
            background-color: red;
            top: calc( 100% - 5rem ); /*100% - height*/
            transition: all .3s ease;
            will-change: top;
        }

  .container:hover  .child{
            top: 0;  
        }

<div class="container">
  <div class="child"></div>
</div>

您也可以使用The transform CSS property 来翻译子元素。

 .container {
            position: relative;
            height: 20rem;
            width: 20rem;
            border: solid blue 0.05rem;
        }

        .child {
            position: absolute;
            display: inline-block;
            height: 5rem;
            width: 5rem;
            background-color: red;
            bottom: 0;
            transition: all .3s ease;
            will-change: bottom;
        }

.container:hover  .child{
    bottom: 100%;
    transform: translateY(100%)
}

<div class="container">
  <div class="child"></div>
</div>

【讨论】：