CODEWITHSUNDEEP
htmlcssangularjs
MJH
MJH

Reputation: 859

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

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.

Upvotes: 0

Views: 39

Answers (1)

Ashraful Alam
Ashraful Alam

Reputation: 380

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

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

Upvotes: 1

Related Questions