css - 从容器底部到顶部的过渡 div 位置

Question

<分区>

Answer 1

使用calc() CSS function , 然后 :hover 父对象而不是 子对象。

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