"टाइपस्क्रिप्ट के लिए कोणीय 2.0" (अल्फा) एनीमेशन कैसे काम करता है?

Question

मैं कोणीय दृश्य में बहुत नया हूं। मैंने टाइपस्क्रिप्ट के लिए एंगुलर 2.0 सीखना शुरू कर दिया और मैं सोच रहा था कि कैसे एनीमेशन (jQuery के साथ एक साधारण एचटीएमएल में) एंगुलर 2.0

कोणीय 2.0 (angular.io> विशेषताएं) के मुखपृष्ठ में आप काम कर सकते हैं देखें, "टाइपस्क्रिप्ट के लिए कोणीय 2.0" में एनीमेशन करने का एक तरीका है।

अपना शोध में मैं कुछ इस तरह चला: http://www.angular-dev.com/angular-connect-slides/#/26/0/

लेकिन मुझे लगता है यह सिर्फ एक सामान्य जावा स्क्रिप्ट कोड है। और मुझे यकीन नहीं है कि ngAnimate 2.0 वह है, जो मैं ढूंढ रहा हूं।

दुर्भाग्यवश, मुझे इसके बारे में और जानकारी नहीं मिल रही है।

मैं आपकी क्या अपेक्षाएं हैं, बहुत सरल है:

जब मैं सिर्फ एक सरल div कंटेनर में क्लिक करें, मुझे लगता है कि एक और div कंटेनर प्रकट होता है (जो unvisible शुरुआत में होता है)। http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle

लेकिन क्या मैं चाहता हूँ, टाइपप्रति में इस एनीमेशन है:

jQuery में, यह कुछ इस तरह होगा। क्या आपको कोई आइडिया है कि मैं इस लक्ष्य तक कैसे पहुंचूं?

अग्रिम में आपके उत्तर के लिए धन्यवाद!

EDIT मुझे खेद है, मैं उल्लेख करना भूल गया, मैं वास्तव में क्या चाहता हूं। मैं टॉगल का उपयोग करना चाहता हूं, लेकिन विंडोज 10:

जैसे कुछ "जब आप" विंडोज + ए "दबाते हैं, तो यह दाएं तरफ एक साइडबार दिखाई देगा। वही है जो मैं वेबसाइट पर एनीमेशन के साथ चाहता हूं, जब आप एक डिवी कंटेनर पर क्लिक करते हैं, न केवल सरल दिखने और गायब होने के लिए।

<div (click)="showDiv2 = !showDiv2">toggle</div> 
<div *ng-if="showDiv2">div 2</div> 

:

मुझे लगता है कि jQuery कोड ऐसा ही कुछ (केवल एक समय देरी के साथ प्रदर्शित होने के लिए)

$("divA").click(function() { 
    $("divB").toggle(1000); 
}); 

Answer 1

आप सीएसएस का उपयोग कर सकते हैं, या AnimationBuilder

सीएसएस तरीके के लिए आप इस example उनके रेपो से कि वास्तव में क्या आप देख रहे हैं करता है देख सकते हैं।

AnimationBuilder साथ

आप इस

पहले की तरह ही व्यवहार अनुकरण कर सकते हैं आपको लगता है कि बटन और div पकड़ लेंगे टेम्पलेट टॉगल करने के लिए

@Component({ 
    // Setting up some styles 
    template: ` 
    <div animate-box #box="ab" style="height:0; width:50%; overflow: hidden;">Some content</div> 
    <button (click)="box.toggle(visible = !visible)">Animate</button> 
    `, 
    directives : [AnimateBox] // See class below 
}) 

तो फिर तुम निर्देश है कि संभाल लेंगे बनाने की स्थापना एनीमेशन

@Directive({ 
    selector : '[animate-box]', 
    exportAs : 'ab' // Necessary, we export it and we can get its 'toggle' method in the template 
}) 
class AnimateBox { 
    constructor(private _ab: AnimationBuilder, private _e: ElementRef) {} 

    toggle(isVisible: boolean = false) { 
    let animation = this._ab.css(); 
    animation 
     .setDuration(1000); // Duration in ms 

    // If is not visible, we make it slide down 
    if(!isVisible) { 

     animation 
     // Set initial styles 
     .setFromStyles({height: '0', width: '50%', overflow: 'hidden'}) 
     // Set styles that will be added when the animation ends 
     .setToStyles({height: '300px'}) 
    } 
    // If is visible we make it slide up 
    else { 
     animation 
     .setFromStyles({height: '300px', width: '50%'}) 
     .setToStyles({height: '0'}) 
    } 

    // We start the animation in the element, in this case the div 
    animation.start(this._e.nativeElement); 
    } 
} 

संदर्भ

+०१२३५१६४१०६१

• Animation API, यह बहुत आसान है, वास्तव में, वास्तव में सरल है।

नोट्स

यह एक अस्थायी एपीआई, नया एक ngAnimate 2.0 कहा जाता है अभी तक उपलब्ध नहीं है। लेकिन आप AngularConnect - ngAnimate 2.0 पर @ matsko की बात में नया क्या देख सकते हैं।

यहां एक रेपो के साथ plnkr है।

मुझे उम्मीद है कि यह मदद करता है।

Answer 2

अपने सरल "एनीमेशन" के लिए होगा आप केवल एनजी-अगर जरूरत बीटीडब्ल्यू, कोणीय 2 एनीमेशन अभी तक उपलब्ध नहीं है। एनिमेशन दस्तावेज has landed।