变形2元素与锚动画

Question

同一视图中有2个元素。 在插入其他内容的同时从DOM中删除一个。

我想使用锚点动画在这两个元素之间进行变换。

HTML

<button ng-click="showDiv = !showDiv">Anchor Animation</button>

<div ng-if="!showDiv" ng-animate-ref="anchor1" class="anchor1-animation" style="position:absolute; left:150px; top:90px; background:#FE367F; width:50px; height:50px"></div>

<div ng-if="showDiv" ng-animate-ref="anchor1" class="anchor1-animation" style="position:absolute; right:50px; top:250px; background:#3396F1; width:200px; height:200px"></div>

CSS

.anchor1-animation.ng-enter, .anchor1-animation.ng-leave {
  @include transition(all 50ms linear);
}

.anchor1-animation.ng-anchor-out {
  @include transition(all 0ms linear);
}

.anchor1-animation.ng-anchor-in {
  @include transition(all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000));
}

这适用于除Safari之外的所有浏览器，它让我疯狂！

适用于Chrome，Firefox，IE10 +，Edge。