角度动画 - 动画在中间“卡住”

Question

我正在使用角度动画创建动画。 我有一个简单的html，其结构类似于：

<div>
 <div ng-if="something1" class="animate-if">
         <div ng-include="ctrl1"> </div>
 </div>
 <div ng-if="something2" class="animate-if">
        <div ng-include="ctrl2"> </div>
 </div>
 <div ng-if="something3">
      -- here is html content without include--
 </div>
</div>

此外，这些是我正在使用的动画：

.animate-if{

  position: absolute;
  background-color: white;
  opacity: 1;
}

.animate-if.ng-enter,
.animate-if.ng-leave
{
  -webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  z-index: 99999;
}

.animate-if.ng-enter{
  left: 100%;
}

.animate-if.ng-enter.ng-enter-active {
  left: 0;
}

.animate-if.ng-leave {
  left: 0;
}
.animate-if.ng-leave.ng-leave-active{
  left: 100%;
}

有时我得到的结果是应该显示的div是部分显示的：

你知道我做错了什么吗？

谢谢！

Answer 1

假设主要问题围绕“左”和“左”的动画。每个人的财产＃＆＃39; divs，我会建议一些事情来确保动画成功。

首先，＆＃39; animate-if＆＃39; class被分配给多个元素。您应该以编程方式分配＆＃39; animate-if＆＃39;只上课了＃＆＃39;被选中的div。你需要一些设备（看起来你有标签）来在不同的div之间进行选择。这个选择可以通过AngularJS控制器进行注册，例如，使用$ watch分配＆＃39; animate-if＆＃39;相应的课程。

为了简化您的CSS，您可以省去＆＃39; ng-enter＆＃39;并且＆＃39; ng-leave＆＃39;相关的类声明。它们是不必要的。

你需要一个基本的状态＃＆＃39; divs，由一个简单的类表示，该类将左侧CSS属性设置为超出其各自父元素边缘的某个负位置。这个容器＆＃39; class也可以处理过渡属性。

＆＃39; animate-if＆＃39;分配给感兴趣的选择的类应该包括代表可见的东西＃＆＃39; div处于可见状态和静止位置。

这是简化的两个类可能是什么样的：

    .container {
      left: -100%;
      transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
      opacity: 0;
    }

    .animate-if {
      left: 0;
      opacity: 1;
    }

关于过渡的部分渲染或绘画，你有背景颜色＆＃39;和不透明度＆＃39;声明为＆＃39; .animate-if＆＃39;上课，还有CSS3＆＃39;过渡＆＃39;财产本身。目前还不清楚你是否打算对不透明度进行动画处理。从您的屏幕截图中看起来好像您可能正在使用旧版浏览器。 IE8 and IE9 do not support CSS3 transitions。而且，IE8 only has partial support for opacity。您所看到的可能是浏览器本身的限制，但这是一个猜测，因为我们没有您的完整标记可供探索。

我已经为您写了Codepen example。