html - 如何将向上滑动和向下滑动动画添加到可变高度 div？

Question

当我将鼠标悬停在 div 卡片上时，我想添加向上滑动和向下滑动的动画。

初始卡:

当我将鼠标悬停在卡片上时:

黄色部分 应该向上滑动 并且当我移除悬停时它应该 strong>向下滑动 直到看不见为止。

我可以在悬停时显示和隐藏黄色部分，但我无法为其设置动画。我猜是因为 top: 182px; bottom: auto;(用于隐藏黄色部分并将紫色部分置于底部)和 top:auto;bottom:0;(完全显示黄色卡片，无论其高度如何)

代码如下:

.card{
  margin-right:20px;
display: inline-block;
    padding: 0;
    border-radius: 19px;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
    overflow: hidden;
    height: 200px;
    background-color:#2196f3;
    position:relative;
    text-align:center;
}
.image{
  padding:50px;
}
.content{
  border-radius: 0 0 19px 19px;
        background-color: #673AB7;
    position: absolute;
    width: 100%;
    top: 182px;
    bottom: auto;
}
.desc{
  background-color:#ffeb3b;
}

.card:hover .content{
  top: auto;
    transition: all 2s ease;
    bottom: 0px;
}

<div class='card'>
    fixed height card
    <div class='image'>
        fixed height image
    </div>
    <div class='content'>
        <div class='title'>
            fixed height title
        </div>
        <div class='desc'>
            =:variable height description:= Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud the end.
        </div>
    </div>
</div>

<div class='card'>
    fixed height card
    <div class='image'>
        fixed height image
    </div>
    <div class='content'>
        <div class='title'>
            fixed height title
        </div>
        <div class='desc'>
            =:variable height description:= Lorem ipsum dolor sit amet, consectecing elit, sed do eiusmod tempor incididunt ut the end.
        </div>
    </div>
</div>

这是要玩的 JSFiddle:http://jsfiddle.net/JerryGoyal/63c8hbr5/

只要可以仅使用 CSS 完成，我愿意接受任何想法!

Answer 1

关于需要始终使用相同的位置技术，您是对的。

需要贴在底部，然后设置一个translateY

.card {
  margin-right: 20px;
  display: inline-block;
  padding: 0;
  border-radius: 19px;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
  height: 200px;
  background-color: #2196f3;
  position: relative;
  text-align: center;
}

.image {
  padding: 50px;
}

.content {
  border-radius: 0 0 19px 19px;
  background-color: #673AB7;
  position: absolute;
  width: 100%;
  bottom: 18px;
  transform: translateY(100%);
  transition: all 2s ease;
}

.desc {
  background-color: #ffeb3b;
}

.card:hover .content {
  bottom: 0px;
  transform: translateY(0%);
}

<div class='card'>
  fixed height card
  <div class='image'>
    fixed height image
  </div>
  <div class='content'>
    <div class='title'>
      fixed height title
    </div>
    <div class='desc'>
      =:variable height description:= Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud the end.
    </div>
  </div>
</div>

<div class='card'>
  fixed height card
  <div class='image'>
    fixed height image
  </div>
  <div class='content'>
    <div class='title'>
      fixed height title
    </div>
    <div class='desc'>
      =:variable height description:= Lorem ipsum dolor sit amet, consectecing elit, sed do eiusmod tempor incididunt ut the end.
    </div>
  </div>
</div>