CSS动画求助：从bottom:100%滑动到top:0无动画效果

CSS过渡无法在bottom和top两个不同的定位属性之间生成平滑动画——浏览器无法计算这两个属性切换时的中间过渡值，所以直接跳转到目标位置，没有动画效果。

改用transform: translateY()来控制元素位置，这样过渡动画会基于元素自身高度执行，满足你“动画立即开始”的需求，同时实现从父容器上方隐藏位置滑入到top:0的效果：

修改后的CSS代码 #

.wrap {
  position: relative;
  width: 300px;
  height: 500px;
  background: #ddd;
  overflow: hidden;
}

.content {
  position: absolute;
  top: 0;
  transition: transform 0.5s ease;
  /* 初始状态：向上移动自身100%高度，完全隐藏在父容器上方 */
  transform: translateY(-100%);
}

.opened {
  /* 移除位移，滑入到父容器顶部位置 */
  transform: translateY(0);
}

#toggle {
  position: absolute;
  top: 0;
  left: 340px;
}

保留原JS和HTML代码 #

JS和HTML部分无需修改，逻辑保持不变：

JS代码

var content = document.querySelector('.content')

document.querySelector('#toggle').addEventListener('click', function() {
  if (content.classList.contains('opened')) {
    content.classList.remove('opened')
  } else {
    content.classList.add('opened')
  }
})

HTML代码

<div class="wrap">
  <div class="content">
    Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem. Curabitur dignissim nunc id arcu. Nulla facilisi.
  </div>
</div>

<a href="#" id="toggle">toggle</a>

• 初始状态通过transform: translateY(-100%)将元素向上移动自身高度，实现和bottom:100%完全一致的隐藏效果；
• 切换opened类时，仅修改transform属性，浏览器可以平滑计算位移的中间值，生成流畅动画；
• 动画基于元素自身高度执行，无需等待元素移动整个父容器高度，满足你对动画启动时机的要求。

内容的提问来源于stack exchange，提问作者Toniq