CODEWITHSUNDEEP
angularjsng-animate
Harry
Harry

Reputation: 54949

Angularjs ng-animate fadein but it disappears?

HTML:

.popup
  .notification(ng-show="showNow", ng-animate="{show: 'animate-enter'}")
     | Notification text

CSS:

.popup
  .notification
    transition-duration 3s
    transition-timing-function ease
    transition-property all
    opacity 0
    position: absolute;
    width: 250px;
    left: 200px;
    top: 110px;
    z-index: 9;
    background: darkorange;
    padding: 1rem 1rem;
    color #FFF
    line-height 1.5
    transform translateY(0px)

.popup
  .notification.animate-enter-start
    opacity 1
    transform translateY(-10px)

I'm trying to animate a popup getting it to fadein. The fade in works, but then right after the fadein animation plays it fades back out again. How do I get it to stay faded-in?

Fiddle:

http://jsfiddle.net/6Xyys/

Upvotes: 3

Views: 2980

Answers (2)

Rafat Sarosh
Rafat Sarosh

Reputation: 945

All the above fiddle will not work with latest angular. Updated them for Angular 1.4. http://jsfiddle.net/rsarosh/npzLLwL1/3/

HTML

<script src="http://code.angularjs.org/1.4.0/angular.js"></script>
<script src="http://code.angularjs.org/1.4.0/angular-animate.js"></script>
<script>
  angular.module('app', ['ngAnimate']);

</script>
<div ng-app="app" class="popup">
  <button ng-click="showNow = true">activate</button>
  <div ng-if="showNow" class="notification">
    <div>Some sample text</div>
  </div>
</div>

CSS

.popup .notification {
  position: absolute;
  width: 250px;
  left: 200px;
  top: 110px;
  z-index: 99;
  background: #ff8c00;
  padding: 1rem 1rem;
  color: #fff;
  line-height: 1.5;
  opacity: 1;
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
}

.notification.ng-enter {
  opacity: 0;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  transition-duration: 10s;
  transition-timing-function: ease;
  transition-property: all;
}

.notification.ng-enter-active {
  opacity: 1;
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
}

Read more http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

Upvotes: 0

Bruno Croys Felthes
Bruno Croys Felthes

Reputation: 1203

Your CSS is the problem.

You need to set the final properties to the permanent class .popup .notification. Then, you need to set the initial parameters at the active class, and then the final parameters at the start class again.

You need to do this, because the classes animate-enter and animate-enter-start will be removed after the animation, so the final properties needs to be at the .popup .notification class. So, you need to set the opacity to 1 at this class.

Give us a fiddle than we can help you better.

Permanent Class:

.popup
  .notification
    opacity 1;
    position: absolute;
    width: 250px;
    left: 200px;
    top: 110px;
    z-index: 9;
    background: darkorange;
    padding: 1rem 1rem;
    color #FFF
    line-height 1.5
    transform translateY(-10px)

Setup Class:

.popup
  .notification.animate-enter-setup
    transition-duration 3s
    transition-timing-function ease
    transition-property all
    opacity 0
    transform translateY(0px)

Start Animation Class:

.popup
  .notification.animate-enter-start
    opacity 1
    transform translateY(-10px)

Look some samples at this site: ng-animate move sample

Upvotes: 3

Related Questions