Angularjs-ui-route：过渡动画不起作用答案

【问题标题】：Angularjs-ui-route: transition animation not workingAngularjs-ui-route：过渡动画不起作用
【发布时间】：2016-10-01 22:50:18
【问题描述】：

angular js 版本：1.5.6

我正在尝试在 state 更改时添加动画，但事情进展不顺利，我无法弄清楚出了什么问题。请帮忙。

我做了什么？

您可以在我附上的片段中看到 3 个标签。默认那里的颜色是黄色的，但是当他们进入时我希望那里的颜色是红色的。所以我写了这个css：

.tab {
    background-color: yellow;
}

.main{
    -webkit-transition: all 30s ease;
    -moz-transition: all 30s ease;
    transition: all 30s ease;

    &.ng-enter{ 
        .tab{
            background-color: red;
        }
    }

}

然后我在ui-view上应用main css

<div ui-view ng-class="main"></div>

完整代码

var MyApp = angular
  .module('MyApp', [
    'ui.router',
    'ngAnimate'
  ])
  .config(function($urlRouterProvider, $stateProvider) {
    $stateProvider
      .state('tab1', {
        url: "/tab1",
        template: `<div class="tab">
  <h3>Tab 1</h3>
  my content
</div>`
      })
      .state('tab2', {
        url: "/tab2",
        template: `<div class="tab">
  <h3>Tab 2</h3>
 content of tab 2
</div>`
      })
      .state('tab3', {
        url: "/tab3",
        template: `<div class="tab">
  <h3>Tab 3</h3>
 tab 3 content
</div>`
      });

    $urlRouterProvider.otherwise('/tab1');

  });

.tab {
  background-color: yellow;
}
.main {
  -webkit-transition: all 30s ease;
  -moz-transition: all 30s ease;
  transition: all 30s ease;
  &.ng-enter {
    .tab {
      background-color: red;
    }
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.angularjs.org/1.5.6/angular.js"></script>
  <script src="https://code.angularjs.org/1.5.6/angular-animate.js"></script>
  <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
  <script src="app.js"></script>
</head>

<body ng-app="MyApp">
  <header>
    <nav>
      <a ui-sref="tab1">Tab 1</a>
      <a ui-sref="tab2">Tab 2</a>
      <a ui-sref="tab3">Tab 3</a>
    </nav>
  </header>

  <div>
    <div ui-view ng-class="main"></div>
  </div>

</body>

</html>

【问题讨论】：

标签： javascript css angularjs angular-ui-router css-animations

【解决方案1】：

我在您的代码中发现了一些错误。首先，当您使用ng-class 指令时，您应该使用表达式，并且您只需将其设置为类名。所以在这种情况下你应该使用简单的class 属性。而且你的css中也有一些错误。它看起来像less。我已经更正了，如下所示：

.tab {
  background-color: yellow;
}
.main.ng-enter {
  -webkit-transition: all 30s ease;
  -moz-transition: all 30s ease;
  transition: all 30s ease;

}

.main.ng-enter .tab{
      background-color: red;
}

您可以查看工作示例here。在示例中，为了清楚起见，我将transition-time 设置为等于 1s。

【讨论】：

能否请您详细说明过程。这个 CSS 是如何工作的？我知道我要求更多，但它会帮助像我这样的菜鸟。非常感谢谢尔盖..非常感谢。你说我的css看起来像less，这是什么意思？ :D :) :P
另外，它仅在我单击链接时才有效。如果我通过 url 打开它，那么它不起作用。你有什么想法吗？
首先，less 是 css 的预处理器。您的 css 代码语法看起来不像语法。您可以了解更多关于更少的信息here。其次，当您单击链接时，Angular 会创建新的 .main ui-view 元素，其中 ng-enter 类和前一个元素添加 ng-leave 类，然后删除前一个元素。这是另一个给你的example。您可以了解有关动画的更多信息here。第三，我认为当您通过链接打开页面时，角度不会添加 ng-enter 类...
最后一个问题你能告诉我是否可以通过在地址栏中输入 URL 来显示 URL 更改时的动画转换（就像在单击链接时发生的那样），因为如果动画不起作用我正在从地址栏中更改 URL。非常感谢您所做的一切。
好吧，我试图找到一些东西，但我偶然发现了these。实现自己想做的事情似乎是不可能的……