Vikas Bansal Vikas Bansal - 6 months ago 119
AngularJS Question

Angularjs-ui-route: transition animation not working

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>




Answer

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.