Angularjs 局部视图中的动画不起作用

我试图使用ng view在视图之间生成一个简单的幻灯片效果。我不确定我是否做对了。代码如下：

脚本：（1.15）

包含ng view和ng click的HTML用于切换视图：

<div class="flex-container viewport">

<div class="flex-item-1">

  <div>
    <button class="overlay btn icon-cog" ng-click="changeView('/settings')" type="button"></button>   
  </div>  

</div>


<div ng-view  class="flex-item-2" ng-animate="{enter: 'enter', leave: 'leave'}"></div>


<div class="flex-item-3">

  <div>
    <button class="btn btn-5 btn-5a icon-cog"  ng-click="setTimer(3)">
      <span>3</span>
    </button>        
  </div>

  <div>
    <button class="btn btn-5 btn-5a icon-cog"  ng-click="setTimer(5)">
      <span>5</span>
    </button>        
  </div>

  <div>
    <button class="btn btn-5 btn-5a icon-cog"  ng-click="setTimer(10)">
      <span>10</span>
    </button>        
  </div>

  <div>
    <button class="btn btn-5 btn-5a icon-cog"  ng-click="setTimer(15)">
      <span>15</span>
    </button>        
  </div>

</div>

    $scope.changeView = function (view) {
    $location.path(view);
};

用于实现动画效果的CSS：

.enter-setup {
   position:absolute;
   -webkit-transition: 3.3s ease-out all;
   -webkit-transform:translate3d(100%,0,0);
}
.enter-setup.enter-start {
   position:absolute;
   -webkit-transform:translate3d(0,0,0);
}
.leave-setup {
   position:absolute;
   -webkit-transition: 3.3s ease-out all;
   -webkit-transform:translate3d(0,0,0);
}
.leave-setup.leave-start {
   position:absolute;
   -webkit-transform:translate3d(-100%,0,0);
}

内容仍然显示（但现在闪烁），幻灯片动画不起作用。任何帮助都将不胜感激。

---

更新：我将css语法修改为1.15。不幸的是，它仍然不起作用。我正在使用flexbox，我认为这就是问题的原因。使用ng animate+flexbox时，有人遇到类似问题吗？

您使用的是

1.1.5

版本，但您使用的CSS Sintax来自

1.1.4

正确的方法是

enter active

而不是

enter start

，只需

enter

而不是

enter setup

看一看

并在现场检查一些样品

---

如果您只使用

-webkit transform

，这将仅适用于chrome和safari。。。也添加其他供应商。

感谢Bruno提供的链接。它仍然不起作用，我想知道这是否与使用Flexbox作为视图的一部分有关？嗨，Bruno。我设法使一些东西工作起来，但它完全不正常。按下网页标题中的方块将启动动画。这是普朗克。

    $scope.changeView = function (view) {
    $location.path(view);
};

.enter-setup {
   position:absolute;
   -webkit-transition: 3.3s ease-out all;
   -webkit-transform:translate3d(100%,0,0);
}
.enter-setup.enter-start {
   position:absolute;
   -webkit-transform:translate3d(0,0,0);
}
.leave-setup {
   position:absolute;
   -webkit-transition: 3.3s ease-out all;
   -webkit-transform:translate3d(0,0,0);
}
.leave-setup.leave-start {
   position:absolute;
   -webkit-transform:translate3d(-100%,0,0);
}