Question

angular js version：1.5.6

我试图在state发生变化时添加动画，但事情进展不顺利，我无法弄清楚出了什么问题。请帮忙。

我做了什么？

我可以在附加的snipet中看到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>

整码

＆＃13;

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');

  });

＆＃13;

.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;
    }
  }
}

＆＃13;

<!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>

＆＃13;

Answer 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等于1。

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

1 个答案: