угловая версия js: 1.5.6
Я пытаюсь добавить анимацию, когда state
изменено, но все не так хорошо, и я не могу понять, что происходит не так. Пожалуйста помоги.
Что я сделал?
Есть 3 вкладки, как вы можете видеть в snipet, который я приложил. По умолчанию там цвет желтый, но когда они входят, я хочу, чтобы цвет был красным. Поэтому я написал этот 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;
}
}
}
Затем я применил main
css на ui-view
<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. Похоже, что меньше. Я исправил это, вот так:
.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;
}
Вы можете увидеть, работая пример здесь. В примере для ясности я ставлю время transition-time
равным 1 с.
less
, что это значит? : D :): P