如何在ng-repeat项目上实现惊人效果

Question

我的代码的结构如下：

基础HTML

<div class="section_loaded" ui-view="section_loaded" ng-animate-children="true" ></div>

并且将内容注入该ui-view指令的状态如下：

内部App.js

.state("main", {
url:"/",
views:{
  "section_loaded@main": {
    templateUrl: _urlPrefixes.TEMPLATES + "components/Main/Main.html",
    controller: "MainController",
  },
}

}）

我的Main.html如下：

main.html中

  <ul>
  <li class="menu_options" ui-sref="donald_main.music" ng-repeat="tab in tabs">
    <div class="menu_container">
      <div class="menu_item_top_section">
        <img src="dist/img/[[tab.icon]]" alt="[[tab.name]] Icon">
      </div>
      <div class="menu_item_bottom_section">
        <p>[[tab.name]]</p>
      </div>
    </div>
  </li>      
</ul>

我正在尝试使用以下scss

使用惊人的效果为ng-repeat设置动画

main.scss

 [ui-view].ng-enter{
  .Main_Container{
  transition:0.5s;
  transform: translateX(-50px);

   .menu_options{
     transform: translateY(-10px);
     opacity: 0;
     &.ng-enter-stagger{
       transition-delay: 0.3s;
       transition-duration: 0;
     }
   }
}
}

我正在尝试使用上述css代码在ng-repeat生成的元素上实现惊人的滑入式动画。我能做到的最好的事情就是元素确实一下子完全滑动，但我无法获得惊人的效果。我在上面提供的代码中做错了吗？我在网上搜索过，但所有结果都指向我提供的css，这似乎不起作用。我正在使用ng-animate v1.6.3。