React项目中wrapper设置的CSS transition动画未触发是什么原因？

问题原因 #

• 你给wrapper设置了transition: right 2s ease，但没有给wrapper添加非static的定位属性，right属性仅对position为relative/absolute/fixed/sticky的元素生效，默认静态定位下right无任何作用，过渡监听的属性根本不会触发变更。
• 你目前仅通过closed类修改grid-template-areas属性，该属性本身不属于CSS支持过渡的属性列表，绝大多数浏览器都不会为其生成过渡动画。
• 你当前代码里aside元素处于注释状态，不存在的元素自然无法实现覆盖效果。

修复方案 #

优先用transform实现位移，性能更好且不需要额外设置定位，修改如下：

1. 打开aside元素的注释，给aside设置z-index: 1，给wrapper设置z-index: 10，确保位移后wrapper可以覆盖在aside上层。
2. 修改wrapper的过渡属性，监听transform而非right：

.wrapper {
  /* 原有其他样式不变 */
  z-index: 10;
  transition: transform 2s ease, grid-template-columns 2s ease;
  transform: translateX(0);
}

3. 修改closed类的样式，直接设置位移属性，同时修改列宽让内容占满wrapper：

.closed{
  transform: translateX(200px);
  grid-template-columns: repeat(12, 1fr);
}

4. 移除closed类里重复的transition属性，只要在父类wrapper定义一次即可。

修改后点击按钮即可看到wrapper平滑右移200px覆盖aside、同时内容区域同步延展占满的效果。

内容的提问来源于stack exchange，提问作者Emma R.