当 div 被添加的另一个 div 移动时平滑过渡 ngAnimate 和 translate答案

【问题标题】：Smooth transition when divs is moved by another div being added ngAnimate and translate当 div 被添加的另一个 div 移动时平滑过渡 ngAnimate 和 translate
【发布时间】：2016-12-09 21:16:37
【问题描述】：

我有两个 div，一个在另一个之上。

顶部的 div 用 ngAnimate 显示并将第二个 div 向下推。

我想使用 translateY 动画来显示顶部 div，因为它看起来不错。

@keyframes enter_not_smooth {
  from {transform: translateY(-100px);} to {transform: translateX(0px);}
}

@keyframes leave_not_smooth {
  from {transform: translateY(0px);} to {transform: translateY(-100px);}
}

问题：底部 div 在显示顶部 div 时不会平滑移动，而是跳转到它的最终位置。

如果我使用高度动画来显示顶部 div，底部 div 会随着顶部 div 的显示而平滑移动。

@keyframes enter_smooth {
  from {height: 0px;} to {height: 100px;}
}

@keyframes leave_smooth {
  from {height: 100px;} to {height: 0px;}
}

如果您需要澄清，请查看此 jsfiddle https://jsfiddle.net/9bz4Lwxa/105/

问题：有什么方法可以使用 translateY 属性或其他可以实现类似显示动画的属性来实现平滑动画，其中顶部 div 的高度没有增长，而是全尺寸并且只是将底部 div 推出怎么走？

谢谢。

【问题讨论】：

标签： angularjs css css-animations ng-animate

【解决方案1】：

这是一项艰巨的任务，我花费了数小时、数小时和数小时试图完成。我想出的唯一可行的解决方案非常复杂，不值得所有额外的代码。

问题在于，当您使用transform 为元素设置动画时，其边界框保持静态（似乎在 DOM 场景后面）并且不会进行动画处理，以免影响任何同级元素。作为参考，我会阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

作为动画高度/宽度/等动画的替代方法（因为它会导致浏览器中的重绘/重排），我使用了transform 动画，在这种情况下感觉更好。

我在这里根据您的小提琴创建了一个示例： https://jsfiddle.net/tommywhitehead/5q6wec92/1/

注意：看起来您可能以非传统方式注入 ngAnimate，因此它没有读取转换时间函数（在正确的时间放置 .ng-enter 和 .ng-enter-active）但我认为这应该给出你是正确的想法。

我希望大供应商能以某种方式解决这个问题，因为这对许多开发者来说都是一个大问题。

希望有帮助！

【讨论】：