JS 控制 HTML 从底部出现的动画效果

可以使用 CSS3 动画与 JavaScript 配合实现从底部出现的动画效果。

首先，需要定义一个 CSS3 动画，可以使用关键帧（@keyframes）来实现从底部滑入的动画，例如：

@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

上面的代码定义了一个从底部滑入的动画，从初始状态（0%）到最终状态（100%），元素的垂直方向位置从下面移动到顶部。

接下来，在 JavaScript 中，可以通过获取元素的样式来触发动画效果，例如：

const element = document.querySelector('.animate');
element.style.animation = 'slideInFromBottom 1s ease-in-out';

上面的代码获取了 class 为 animate 的元素，将其 animation 属性设为 slideInFromBottom 动画，并设置了动画时长为 1 秒，缓动效果为 ease-in-out。

这样，当 JavaScript 代码被调用时，元素就会从底部滑入，实现了从底部出现的动画效果。