如何反转AngularJS中ng-show/ng-hide的CSS3过渡动画？

你遇到的问题核心是没有对齐显示动画的旋转方向和原点逻辑，原显示动画是绕Y轴以左侧为原点从90度转到0度，而你用180度旋转会导致元素完全翻转，自然出现偏移过度的问题。

先拆解原显示动画的逻辑：

• 显示动画（.ng-hide-remove）：元素初始状态是rotateY(90deg)（以左侧为旋转原点），动画结束回到rotateY(0)，看起来像是从左侧“转出来”。

要实现它的反向隐藏动画，只需要让元素从rotateY(0)的状态，绕同一个原点（左侧）转回到rotateY(90deg)即可，这样动画路径完全和显示动画反向。

修正后的隐藏动画CSS代码如下：

.funky-show-hide.ng-hide-add {
  transform: rotateY(0);
  transform-origin: left;
  transition: all 0.5s ease; /* 和显示动画的过渡曲线保持一致，更协调 */
}
.funky-show-hide.ng-hide-add.ng-hide-add-active {
  transform: rotateY(90deg); /* 转到显示动画的初始状态，而非180度 */
}

为什么你的原代码会出问题？ #

你用了rotateY(180deg)，这会让元素绕Y轴完全翻转180度，此时元素的右侧会转到原来左侧的位置，自然看起来偏移过度。而我们只需要让元素转到“刚好看不见”的状态——也就是显示动画开始前的rotateY(90deg)，这样既完成了隐藏，又和显示动画完全反向。

把这段代码替换后，就能得到和显示动画完美反向的隐藏效果啦！

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