css - angular-animate - 动画在中间是 'stuck'

Question

我正在使用 angular-animate 来创建动画。我有一个简单的 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 Controller 注册，例如，使用 $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 and IE9 do not support CSS3 transitions .而且，IE8 only has partial support for opacity .您所看到的可能是浏览器本身的限制，但这是一种猜测，因为我们没有您的完整标记可供探索。

我写了一个Codepen example给你。