angularjs - 显示柔性动画

Question

当我打开 item-accordion 时，我使用了动画。但是 item-accordion 的图像使用 CSS3 的 display flex 属性在多行中换行。每当我打开 Accordion 时，额外的内容都会在过渡期间显示在右侧。所以有人可以建议可以做些什么来解决它吗？当内容的宽度很小时会发生这种情况

另一个问题是我使用了 animate-repeat 动画来删除元素。但是当我打开元素 Accordion 时，动画也会应用于它们，因此将图像作为列表进行动画处理。

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

这是我正在使用的动画。

代码的demo到这里就结束了: http://plnkr.co/edit/FnQVCYrSGOlpk5wNxAZ6?p=preview

Answer 1

在必须满足复杂的动画要求时，我遇到过类似的问题。我已经将 greensock 用于更复杂的动画，但这里似乎不需要。一般的概念是您将要为某些东西制作动画，但在动画完成之前和之后更改/更改属性。您将不得不使用一些回调 promise 在动画的第一部分完成后运行额外的动画，或者在开始或结束之前进行一些手动计算和调整属性。

Angular Animate

Ionic Animate

似乎 ionic 允许 onStart 和 onEnd 回调。我会在开始时隐藏或强制某些属性并在结束时重置它们，这样您就可以绕过您正在尝试使用的内容。如果您不想使用固定的宽度或高度，您将不得不抓取窗口/屏幕大小以及基于此的一些基本计算。因此，您可以让窗口大小根据动画窗口设置大小，然后在完成后重置回自动。