从容器底部到顶部的转换div位置

Question

我正在尝试使（绝对定位的）div从其父div的底部：0过渡到顶部：0。我可以很高兴地将其从下限：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>

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

Answer 2

try this

.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 ); 
    transition: all .3s ease;
}

.container:hover  .child{
    animation-name: bottom_to_top;
    animation-duration: 1s;
    animation-delay: 0s,3s;
    animation-fill-mode: both; 
}

@keyframes bottom_to_top {
  0% {
    top: calc( 100% - 5rem );
  }
  100% {
    top: 0; 
  }
}

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

Answer 3

try this

.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 ); 
    transition: all .3s ease;
}

.container:hover  .child{
    animation-name: bottom_to_top;
    animation-duration: 1s;
    animation-delay: 0s,3s;
    animation-fill-mode: both; 
}

@keyframes bottom_to_top {
  0% {
    top: calc( 100% - 5rem );
  }
  100% {
    top: 0; 
  }
}

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