ionicFramework로 iOS의 간단한 애니메이션에 이상한 깜박임이 발생했습니다.

Question

저는 IonicFramework에 익숙해 져 있고 정말 간단한 앱을 만들고 있습니다. 지금은 하나의 버튼 공개 패널 (페이드 인, 하단에서 슬라이딩을 시도하고 있음)이 있습니다. 그것은 안드로이드에 잘 작동하지만 iOS 애니메이션에 이상한 깜박임이 에뮬레이터와 장치에서 처음에 나타납니다. 애니메이션

<ion-content class="has-header" ng-controller="MainCtrl"> 
    <div class="container"> 
     <button class="btn btn__big centered primary" ng-click="toggleDetails()">toggle info</button> 
    </div> 
    <div class="panel panel-animated primary ng-hide" ng-show="detailsVisible"> 
     Details here 
    </div> 
    </ion-content> 

과 CSS 클래스가 나는 겨 쇼를하는

.panel { 
    position: absolute; 
    width: 100%; 
    height: 40%; 
    top: 60%; 
    padding: 1em; 
} 

.panel-animated { 
    -webkit-animation: fadeIn 0.5s; 
    -moz-animation: fadeIn 0.5s; 
    animation: fadeIn 0.5s; 
} 

.panel-animated.ng-hide { 
-webkit-animation: fadeOut 0.5s; 
-moz-animation: fadeOut 0.5s; 
    animation: fadeOut 0.5s; 
} 

을 나는, 그냥 일반 이온 애니메이션을 외부 libs와 사용하지 않는 적용 다음과 같이

은 기본적으로 내보기 보인다 내장 애니메이션 클래스. 나는 repository with complete, ready to run application을 만들었으므로 확인하고 싶을 것입니다.

또한 비디오 상영이 깜박하지만, 플래시 비디오 허튼 소리로 많은 이상이 https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode을 확인 실제로 video here

Answer 1

이오닉 키 프레임 애니메이션 fadeIn 및 fadeOut 사용 opacity ng-hide는 요소를 display: none !important;으로 표시하지 않습니다. ng-hide 클래스를 추가/제거하면 다시 칠하기가 발생합니다.

이오니아 사용 각도 ngAnimate. 당신의있는 style.css에서, 당신은 :

.panel-animated { 
    -webkit-animation: fadeIn 0.5s; 
    -moz-animation: fadeIn 0.5s; 
    animation: fadeIn 0.5s; 
} 

.panel-animated.ng-hide { 
    -webkit-animation: fadeOut 0.5s; 
    -moz-animation: fadeOut 0.5s; 
    animation: fadeOut 0.5s; 
} 

나는 꽤 괜찮은 NVIDIA 그래픽에 실행 시도하고 크롬의 렌더링 그래프의 피크가 발생했습니다.

는 이러한 피크가 발생하지 the docs on ngShow aniations

.panel-animated.ng-hide-remove { 
    -webkit-animation: fadeIn 0.5s; 
    -moz-animation: fadeIn 0.5s; 
    animation: fadeIn 0.5s; 
} 

.panel-animated.ng-hide-add { 
    -webkit-animation: fadeOut 0.5s; 
    -moz-animation: fadeOut 0.5s; 
    animation: fadeOut 0.5s; 
} 

에 따른 양식 변경 후 : .ng-hide-add가 후에 요소가 렌더링 을 적용되므로

그건 그리고 나서 오직 이메이션이 적용됩니다. 정크가 삭제되었습니다.

Answer 2

가있는 동안 단 하나의 기록이있다. 아마도 iOS가 첫 번째 프레임에서 잘못된 불투명도 값을 설정했을 것입니다.