CSS Transform 实现元素隐藏和过渡动画效果

可以使用 transform 属性来实现元素的隐藏和过渡动画效果，例如使用 translateY() 函数实现垂直方向的移动动画，使用 rotate() 函数实现旋转动画，使用 scale() 函数实现缩放动画等。同时，需要设置 transition 属性来指定过渡的属性、持续时间、延迟时间和过渡函数等。

.element {
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}

.element.show {
  transform: translateY(0);
}

上面的代码中，.element 元素默认隐藏并向上移动 100% 的高度，当添加 .show 类名时，通过将 transform 属性的值改为 translateY(0) 来实现元素的显示和向下移动的动画效果，过渡时间为 0.3 秒，过渡函数为 ease-in-out。