Angularjs-ui-route: transition animation not working
Question
angular js version: 1.5.6
I am trying to add animation when state is changed but things are not going well and I am not able to figure out whats going wrong. Please help.
What have I done?
There are 3 tabs as you can see in the snipet I have attached. Default there color is yellow but When they enter I want there color to be red. So I have written this 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;
}
}
}
Then I applied main css on the ui-view
<div ui-view ng-class="main"></div>
Whole Code
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>
1 answers
solution1
1 ACCPTED 2016-06-02 10:48:18
I've found some mistakes in your code. First, when you're using ng-class directive you should use expression, and you just set it to a class name. So you should use simple class attribute in this case. And also you have some mistakes in your css. It looks like less . I've corrected it, like this:
.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;
}
You can see working example here . In example I put transition-time equals to 1s for clarity.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.