当div被另一个div移动时平滑过渡ngAnimate和translate

我有两个div，一个在另一个之上。当div被另一个div移动时平滑过渡ngAnimate和translate

顶部div显示ngAnimate并推下第二个股票。

我想使用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/

问题：有什么办法可以实现通过平移Y财产或其他财产流畅的动画效果，将达到类似的露出动画其中顶格不是在高度上增长，而是全尺寸，只是将底部的div推开？

谢谢。

来源

2016-08-04 jalbasri

这是一个艰难的，我花了几小时，几小时，几小时试图完成。我想出的唯一工作解决方案非常复杂，不值得所有额外的代码。

问题是，当您使用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在正确的时间），但我认为这应该给你正确的想法。

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

希望有帮助！

来源

2016-08-04 21:35:57

当div被另一个div移动时平滑过渡ngAnimate和translate

回答

相关问题