각도가 흐려 지지만 사라집니다.

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에 점점 팝업 애니메이션을 시도하고있다. 페이드 인은 작동하지만, 페이드 인 애니메이션이 재생 된 직후 다시 페이드 아웃합니다. 나는 머 금고 머물러있게하려면 어떻게해야합니까?

바이올린 :

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) 

시작 애니메이션 등급 : ng-animate move sample

Answer 2

:

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

이 사이트에서 몇 가지 샘플을 봐

위의 모든 바이올린은 최신 각도로 작동하지 않습니다. 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