Angularjs 使用display flex的动画

当我打开项目accordion时，我使用了动画。但是项目accordion的图像使用CSS3的display flex属性包装在多行中。每当我打开手风琴时，额外的内容都会在过渡期间显示在右侧。那么，有人能建议如何解决这个问题吗？当内容的宽度很小时，就会出现这种情况

另一个问题是我使用了动画重复动画来删除项目。但是当我打开项目手风琴时，动画也应用于它们，因此将图像动画化为列表

.list .item-accordion {
  -webkit-transition:0.09s all linear ;
  transition: 0.09s all linear;
}

这是我正在使用的动画

代码的演示在这里：

---

在满足复杂的动画需求时，我也遇到过类似的问题。我用过greensock制作更复杂的动画，但这里似乎不需要。一般的概念是，您希望为某个对象设置动画，但在动画完成前后更改/更改属性。在动画的第一部分完成后，您必须使用一些回调承诺来运行其他动画，或者在开始或结束之前执行一些手动计算和调整属性

---

似乎ionic允许onStart和onEnd回调。我会在启动时隐藏或强制某些属性，并将它们重置为ONED，这样您就可以绕过您试图使用的内容。如果你不想在固定的宽度或高度下工作，你必须掌握窗口/屏幕的大小，以及基于此的一些基本计算。因此，您可以将窗口大小设置为基于动画窗口的大小，然后在完成后重置回自动。

设置flex项目的动画通常需要设置一个基础。如果不指定任何尺寸，它们的动画效果就不好。好吧，但我的要求是我不想修改尺寸问题是浏览器不能设置“自动”的高度或宽度动画。您没有使用flex垂直布局，而是将其作为一行进行布局，并让其进行包装。这完全违背了使用flex的目的。我能做到这一点的唯一方法是使用javascript检查项目的当前高度，设置该高度，获取新内容，而隐藏（不透明）检查该内容的高度，然后设置该高度。不过，您可以尝试以下技巧：