如何在Framer Motion中更改动画方向？实现底部起始的高度动画

要让元素从底部向顶部展开，核心是改变动画的起始锚点或元素的定位逻辑——默认的height动画会从顶部向下扩展，因为元素的布局流是从上到下的。这里提供两种可行方案：

方案一：通过定位调整实现height动画 #

给目标元素设置绝对定位并固定底部，让height增长时向上延伸：

1. 调整CSS（需给父容器添加相对定位）：

.bar-container {
  position: relative;
  height: 130px; /* 和目标元素最终高度一致 */
}

.bar {
  width: 6px;
  border-radius: 3px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, #FFF 100%);
  position: absolute;
  bottom: 0; /* 固定元素在容器底部 */
}

2. JS代码保持原有逻辑不变：

const ref = useRef(null);
const isInView = useInView(ref);

const variants = {
  hidden: { height: 0 },
  visible: { height: 130 }
};

<motion.div 
  ref={ref}
  className={styles.bar}
  animate={isInView ? 'visible' : 'hidden'}
  variants={variants}
  transition={{ duration: 0.5 }}
></motion.div>

方案二：使用scaleY动画配合transformOrigin #

这种方法无需调整父容器布局，通过缩放动画从底部展开：

1. 修改JS的variants配置，使用scaleY并设置transformOrigin为底部：

const ref = useRef(null);
const isInView = useInView(ref);

const variants = {
  hidden: { scaleY: 0, transformOrigin: "bottom" },
  visible: { scaleY: 1, transformOrigin: "bottom" }
};

<motion.div 
  ref={ref}
  className={styles.bar}
  animate={isInView ? 'visible' : 'hidden'}
  variants={variants}
  transition={{ duration: 0.5 }}
></motion.div>

2. 调整CSS，固定元素高度并添加overflow:hidden：

.bar {
  width: 6px;
  border-radius: 3px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, #FFF 100%);
  height: 130px;
  overflow: hidden;
}

两种方案都可以实现从底部向上展开的效果，方案一适合需要精确控制height的场景，方案二更简洁灵活。

内容的提问来源于stack exchange，提问作者Володимир Романенко