यूई-राउटर

Question

में राज्य संक्रमणों के बीच फीका एनीमेशन मैं अपने वेब एप्लिकेशन में यूई-राउटर का उपयोग कर रहा हूं। रूट div कोड है:

<div ui-view="content" class="fade-in-up"></div> 

जब मैं एक और (/ आदेश नीचे स्क्रीनशॉट में/फीडबैक के लिए) के लिए एक राज्य से जाने के लिए, पहला राज्य से पहले नए राज्य की फीका एनीमेशन समाप्त हो गया है छिपा नहीं है।

मेरे सीएसएस है:

@-webkit-keyframes fadeInUp { 
    0% { 
opacity: 0; 
-webkit-transform: translateY(15px); 
} 
100% { 
opacity: 1; 
-webkit-transform: translateY(0); 
} 
} 
@-moz-keyframes fadeInUp { 
0% { 
opacity: 0; 
-moz-transform: translateY(15px); 
} 
100% { 
    opacity: 1; 
    -moz-transform: translateY(0); 
} 
} 
@-o-keyframes fadeInUp { 
0% { 
opacity: 0; 
-o-transform: translateY(15px); 
} 
100% { 
    opacity: 1; 
    -o-transform: translateY(0); 
    } 
    } 
    @keyframes fadeInUp { 
    0% { 
    opacity: 0; 
    transform: translateY(15px); 
} 
100% { 
    opacity: 1; 
    transform: translateY(0); 
    } 
    } 
    .fade-in-up { 
    -webkit-animation: fadeInUp .5s; 
    animation: fadeInUp .5s; 
    } 

कहाँ मैं गलत कर रहा हूँ?

Answer 1

साथ क्या हो रहा है मैं सिर्फ एक tutorial with a working demoCSS बदलाव के साथ इस ngAnimate का उपयोग कर कैसे करना है दिखा पोस्ट किया है।

वहाँ डेमो में बदलाव की एक जोड़ी है, यह मुख्य तत्व पर नए विचारों में fading के लिए सीएसएस टुकड़ा है:

/* start 'enter' transition on main view */ 
main.ng-enter { 
    /* transition on enter for .5s */ 
    transition: .5s; 

    /* start with opacity 0 (invisible) */ 
    opacity: 0; 
} 

/* end 'enter' transition on main view */ 
main.ng-enter-active { 
    /* end with opacity 1 (fade in) */ 
    opacity: 1; 
} 

वहाँ केवल .ng-enter पर और पर नहीं .ng-leave एक संक्रमण है, जो नए का कारण बनता है है देखें (जो प्रवेश कर रहा है) पुराने दृश्य (जो जा रहा है) में फीका होने के तुरंत बाद गायब हो जाता है।

Answer 2

एनीमेशन ट्रिगर करने के लिए आप .ng-enter और .ng-leave कक्षाओं (यदि आपने 'एनजी-एनिमेट' मॉड्यूल शामिल किया है) का उपयोग कर सकते हैं। तो फिर आप अपने सीएसएस फ़ाइल में कुछ इस तरह कर सकते हैं:

[ui-view].ng-leave { 
    animation: fadeOut 0.5s; 
} 

[ui-view].ng-enter { 
    animation: fadeIn 0.5s; 
} 

या बस को बदलने और अस्पष्टता गुणों पर एक अवधि के साथ एक संक्रमण गुण सेट और सिर्फ उसी के अनुसार उन्हें सेट ng-enter और ng-leave कक्षाओं में।

Answer 3

अपने DIV के लिए "मुख्य" वर्ग को जोड़ने, तो यह इस तरह दिखता है कोशिश:

<div ui-view="content" class="main"></div> 

फिर इस सीएसएस का उपयोग करें:

.main.ng-enter { 
    transition: 0.25s; 
    opacity: 0; } 
.main.ng-enter-active { 
    opacity: 1; } 
.main.ng-leave { 
    transition: 0.25s; 
    opacity: 1; } 
.main.ng-leave-active { 
    opacity: 0; } 

Answer 4

ui-router अपने ui-view मार्ग परिवर्तन आग पर बाहर देखने जाएगा आने वाले दृश्य के समान समय। इसलिए आपको जो मिलता है वह पिछला ui-view अभी भी दिखाई देता है जबकि अगली ui-view प्रस्तुत की जाती है और यदि आप दृश्य को एनिमेट कर रहे हैं तो वहां ओवरलैप betwee की संक्रमण अवधि होगी पुराने दृश्य और नया। आप पुराने एक जब तक नई ui-view प्रतिपादन पर बंद धारण करने चाहिए बाहर एनिमेट है समाप्त (में नया एक एनिमेट से पहले)

मैं ui-router$rootScope राज्य परिवर्तन की घटनाओं पर गौर इस (https://github.com/angular-ui/ui-router/wiki#state-change-events) का दोहन करने के लिए होगा।

## Hold off on the state change, until current (previous) state has finished animating out 
$rootScope.$on '$stateChangeStart', (event, toState, toParams, fromState, fromParams) -> 
    console.log "state change start", arguments 

$rootScope.$on '$stateChangeSuccess', (event, toState, toParams, fromState, fromParams) -> 
    console.log "state change success", arguments 

भी इस व्यक्ति के उदाहरण http://homerjam.github.io/angular-ui-router-anim-in-out पर एक नज़र डालें। वे एक मॉड्यूल ui-view में हुक और एक enter और leave में परिवर्तन के अलावा टूट जाता है, जहां आप (पुराने देखने के) चेतन बाहर के बाद (नया देखने के) में चेतन ट्रिगर कर सकते हैं बनाया है http://homerjam.github.io/angular-ui-router-anim-in-out/anim-in-out.js

इस व्यक्ति बताता है कि ui-view परिवर्तन दोहराव https://youtu.be/W89DYSthCTQ?t=345