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>最佳答案
我在您的代码中发现了一些错误。首先，当你使用 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。
关于javascript - Angularjs-ui-路由 : transition animation not working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37587806/