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>

Sergey Tyupaev · Accepted Answer · 2016-06-02 10:53:21Z

1

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.

edited Jun 2, 2016 at 10:53

answered Jun 2, 2016 at 10:48

Sergey Tyupaev

1,27310 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Vikas Bansal Over a year ago

Could you please elaborate the process. how does this css works? I know I am asking for more but it will help noobs like me. Many thanks Sergey..many thanks. and you said that my css looks like less, what does it mean? :D :) :P

Vikas Bansal Over a year ago

Also, It works only if I click on a link. If I open it by url then it does not work. do u have any idea?

Sergey Tyupaev Over a year ago

First, less is preprocessor for css. Your css code syntax looks like less syntax. You can learn more about less here. Second, when you're click the link, angular creates new .main ui-view element with ng-enter class and to previous element it adds ng-leave class, and then removes previous element. Here's another example for you. You can learn more about animations here. And third, I think when you open the page by link angular doesn't add ng-enter class...

Vikas Bansal Over a year ago

one last question could you tell me if it is possible to show the animation transition on URL change by entering a URL in address bar (just like it happens on link click) because the animation is not working if I am changing the URL from address bar. Tons of thanks for everything.

Sergey Tyupaev Over a year ago

Well, I've tried to find something, but I've stumbled on these. It's seems impossible to achieve what you want to do...

|

Collectives™ on Stack Overflow

Angularjs-ui-route: transition animation not working

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related