角度动画 - 动画在中间"卡住"

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

假设主要问题围绕每个“something#”div 的“left”属性的动画，我建议采取一些措施来确保动画成功。

首先，“animate-if”类被分配给多个元素。您应该以编程方式将“animate-if”类仅分配给正在选择的“something#”div。您需要一些设备（似乎有选项卡）来在不同的 div 之间进行选择。这个选择可以通过 AngularJS 控制器注册，例如，使用 $watch 来相应地分配“animate-if”类。

为了简化 CSS，您可以省去“ng-enter”和“ng-leave”相关的类声明。它们是不必要的。

您需要“something#”div 的基本状态，由一个简单的类表示，该类将 left CSS 属性设置为超出其各自父元素边缘的某个负的左侧位置。这个“容器”类还可以处理转换属性。

分配给感兴趣的选择的“animate-if”类应包括表示可见状态下的可见“something#”div 和静止位置的 CSS 属性。

这两个类经过简化后可能如下所示：

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

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

关于过渡的部分渲染或绘制，您可以为“.animate-if”类声明“背景颜色”和“不透明度”，还有 CSS3“过渡”属性本身。目前尚不清楚您是否打算对不透明度进行动画处理。从您的屏幕截图来看，您似乎使用的是旧版浏览器。 IE8 和 IE9 不支持 CSS3 过渡。并且，IE8仅对opacity有部分支持。您所看到的可能是浏览器本身的限制，但这只是猜测，因为我们没有您的完整标记可供探索。

我已经为你写了一个Codepen 示例。