How to apply css animation to angular view when the view is called

Question

I'm new to angular, and I have a CSS stylesheet with animations i want to apply to a view when it is called. I tried searching online but I don't understand the information.

My CSS:

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft{
   -webkit-animation-name: fadeInLeft;
   animation-name: fadeInLeft;
 }

My first view(the one that's loaded first):

<body id="login">
    <div>
        <div id="container" class="container-fluid">            
            @RenderBody()
        </div>
    </div>    
</body>

My partial view:

<div class="animated fadeInLeft">
    <h1 class="large">Welcome.</h1>
</div>

When the page is loaded where there is renderbody() my partial view will be.

I want to to put a fadeInLeft animation on it when it is called by the first view.

I hope my question is clear enough, I'm really very new to Angular, and used to working with CSS animations on regular Html.

Ashraful Alam · Accepted Answer · 2016-03-24 00:35:32Z

1

I would recommend using ngAnimate module. Then write your CSS like-

.animated .ng-enter {animation: fadeInLeft 1s both ease-in;}

answered Mar 24, 2016 at 0:35

Ashraful Alam

3801 silver badge13 bronze badges

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

Collectives™ on Stack Overflow

How to apply css animation to angular view when the view is called

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related