Angularjs ng-animate fadein, но он исчезает?

Question

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) 

Я пытаюсь оживить всплывающее окно при получении его FadeIn. Затухание в работе, но затем сразу после анимации fadein он снова исчезает. Как мне заставить его остаться в тени?

Fiddle:

http://jsfiddle.net/6Xyys/

Answer 1

Ваш CSS проблема.

Вам необходимо установить окончательные свойства на постоянный класс .popup .notification. Затем вам нужно установить начальные параметры в активном классе, а затем окончательные параметры в стартовом классе снова.

Вам нужно сделать это, потому что классы animate-enter и animate-enter-start будут удалены после анимации, поэтому конечные свойства должны быть в классе .popup .notification. Итак, вам нужно установить непрозрачность на 1 в этом классе.

Дайте нам скрипку, чем мы можем вам помочь.

Постоянный Класс: Класс

.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) 

Установка:

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

Start Animation Класс:

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

Посмотрите некоторые образцы на этом сайте: ng-animate move sample

Answer 2

Все вышеприведенные скрипки не будут работать с последними угловыми. Обновлены для 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); 
} 

Подробнее http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html