CODEWITHSUNDEEP
javascriptangularjscssng-animate
Mads K
Mads K

Reputation: 837

ng-view fades in on purpose, but then fades out

I have this ngView-directive: <div ng-view="" class="fade"></div> where i have the following styles applied:

.fade.ng-enter { 
  -webkit-transition:0.3s linear all;
  transition:0.3s linear all;
  opacity:0.5;
}

.fade.ng-enter.ng-enter-active {
  opacity: 1;
}

But the problem is that the view fades in, and then fades out automatically, by setting it's opacity to 0. Am i missing something important? I have made this screencast illustrating the issue: https://www.youtube.com/watch?v=_5IUO-ntlOA

Upvotes: 0

Views: 74

Answers (2)

Mads K
Mads K

Reputation: 837

Bootstrap apparently has a class called .fade, which has an opacity of 0. That was why.

Upvotes: 2

Chi Row
Chi Row

Reputation: 1106

Here is the fix. 

.fade.ng-enter { 
  -webkit-transition:0.3s linear all;
  transition:0.3s linear all;
  opacity:0.5;
}

.fade.ng-enter-active {
  opacity: 1;
}

ng-enter disappears and only ng-enter-active remains.

Upvotes: -1

Related Questions