कोणीय 2 क्रमबद्ध सूची एनिमेशन

मैं कोड पोस्ट करूंगा लेकिन मुझे वास्तव में यह भी नहीं पता कि कहां से शुरू करना है। मैंने https://angular.io/docs/ts/latest/guide/animations.html एनीमेशन मार्गदर्शिका के माध्यम से पढ़ा है लेकिन यह मेरी आवश्यकता का उत्तर नहीं देता है।कोणीय 2 क्रमबद्ध सूची एनिमेशन

तो, मान लीजिए कि आपके पास *ngFor का उपयोग करके प्रदर्शित वस्तुओं की एक सूची है और सूची के शीर्ष पर सॉर्ट बटन हैं। उदाहरण का कहना है कि डिफ़ॉल्ट प्रकार 'नाम' है। यह प्रारंभिक स्क्रीन

Sort By: Name | Value 
[name: a, value:3] 
[name: b, value:2] 
[name: c, value:1]

पर इस तरह दिखाने तो कहते हैं कि उपयोगकर्ता प्रेस 'मान' द्वारा मूल्य सॉर्ट करने के लिए सूचित कर देंगे।

Sort By: Name | Value 
[name: c, value:1] 
[name: b, value:2] 
[name: a, value:3]

मुझे पता है कि मैं बस उस घटक को जोड़ सकता हूं जो व्यू घटक से जुड़ा हुआ है लेकिन मैं एनिमेटेड होना चाहता था। क्या यह वर्तमान कोणीय 2 एनीमेशन एपीआई के साथ भी संभव है?

स्रोत

2016-09-26 kc707

मेरे पास एक समान समस्या है, हालांकि मेरे लिए, मैं प्रत्येक स्थानांतरित तत्व के लिए एंटर/एनीमेशन एनीमेशन के साथ ठीक हूं। जैसा कि है, यदि आप सूची में वस्तुओं को पुन: व्यवस्थित करते हैं, तो यह * => शून्य को ट्रिगर नहीं करता है और मुझे नहीं लगता कि इसे कैसे प्रतिक्रिया दें। –

@ kc707 शायद इस सवाल का जवाब दे सकता है? – BenRacicot

यह किया जा सकता है, विचार है कि सभी तत्वों को हर समय प्रस्तुत किया जाए। इसके बजाए हम अपने ऑर्डर के आधार पर प्रत्येक तत्व विशेषताओं को बदलते हैं, इसलिए यह एनीमेशन ट्रिगर करेगा।

मैंने अभी विचार को दिखाने के लिए एक बहुत ही सरल बना दिया है।

angular.module('StackApp', []) 
 
    .controller('MainCtrl', function($scope) { 
 
    'use strict'; 
 

 
    $scope.title = 'List'; 
 
    var item1 = { title: "orange", pos: 1 }; 
 
    var item2 = { title: "apple", pos: 2 }; 
 
    var item3 = { title: "banana", pos: 3 }; 
 
    
 
    $scope.items = [item1, item2, item3]; 
 
    
 
    $scope.sort = function() { 
 
    item1.pos = 2; 
 
    item2.pos = 1; 
 
    } 
 
    
 
});

ul li { 
 
    -webkit-transition: all 1.5s ease-in-out; 
 
    -moz-transition: all 1.5s ease-in-out; 
 
    transition: all 1.5s ease-in-out; 
 
} 
 

 
.pos1 { 
 
    padding-left: 1px; 
 
} 
 
.pos2 { 
 
    padding-left: 20px; 
 
} 
 
.pos3 { 
 
    padding-left: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="StackApp"> 
 
    <div ng-controller="MainCtrl"> 
 
    <h1>{{ title }}</h1> 
 
    <button ng-click="sort()">Sort</button> 
 
    <ul> 
 
     <li ng-repeat="item in items" ng-class="'pos' + item.pos">{{ item.title }}</li> 
 
    </ul> 
 
    </div> 
 
</body>

स्रोत

2018-03-02 13:52:29 windmaomao

जवाब ऊपर के बारे में क्षैतिज स्थित है तत्व है, लेकिन आप विचार का उपयोग करें और इस तरह से खड़ी तत्वों के लिए इसे लागू कर सकते हैं:

सभी आइटम divs स्थिति बनाओ: ansolute और एक ही ऊंचाई के साथ। NgStyle के साथ तत्व ऊंचाई के योग के रूप में पैरेंट div ऊंचाई सेट करें।

प्रत्येक आइटम div के लिए सीएसएस में संक्रमण सेट करें।

प्रत्येक तत्व के सेट शीर्ष सूचकांक
प्रत्येक आइटम के लिए शीर्ष पुनर्गणना छँटाई (मैं आप सरणी आइटम के लिए अतिरिक्त प्रोप जोड़ने और इसे लागू कर सकते हैं लगता है पर के अनुसार ngStyle साथ

तो आइटम शीर्ष मूल्यों को बदल संक्रमण से प्रभावित किया जाना चाहिए।

पी.एस. यू का अनुवाद उपयोग कर सकते हैं भी बदलने

स्रोत

2018-03-02 15:24:33

कोणीय 2 क्रमबद्ध सूची एनिमेशन

उत्तर

संबंधित मुद्दे