当 divs 被另一个 div 移动时平滑过渡被添加 ngAnimate 和翻译

Question

我有两个 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 推开？

谢谢。

Answer 1

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

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

作为动画 height/width/etc 的替代方法（因为它会在浏览器中导致 repaints/reflows），我使用了 transform 动画，在这种情况下感觉更好。

我在此处根据您的 fiddle 创建了一个示例： https://jsfiddle.net/tommywhitehead/5q6wec92/1/

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

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

希望对您有所帮助！

当 divs 被另一个 div 移动时平滑过渡被添加 ngAnimate 和翻译

Smooth transition when divs is moved by another div being added ngAnimate and translate

css

css-animations

angularjs

ng-animate