चेतन तालिका के रूप में पंक्तियों जोड़ रहे हैं

Question

मैं वर्तमान में कोणीय कोड का निम्न भाग है:

function MyController($scope) { 
    var items = []; 
     $scope.addRow = function() { 
     items.push({ value: 'Hello, world!' }); 
     $scope.items = items; 
    } 
} 

एचटीएमएल निम्नलिखित स्निपेट के साथ साथ:

<table ng-controller="MyController"> 
    <tr ng-repeat="item in items"> 
     <td> 
      {{item.value}} 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <button ng-click="addRow()">Add row</button> 
     </td> 
    </tr> 
</table> 

जैसी उम्मीद थी, हर बार जब मैं Add Row एक क्लिक नई पंक्ति को Hello, World! टेक्स्ट के साथ जोड़ा गया है।

मैं इसे कैसे बढ़ा सकता हूं ताकि नई अतिरिक्त पंक्ति चमकती हो या चमकती हो क्योंकि यह एक संक्षिप्त पल के लिए दिखाई देता है? विचार यह है कि वास्तविक ऐप में आइटम को बटन क्लिक किए बिना गतिशील रूप से जोड़ा जाएगा, इसलिए मैं उपयोगकर्ताओं को नए जोड़े गए आइटम पर ध्यान आकर्षित करना चाहता हूं।

Answer 1

im नहीं एक महान कोणीय डेवलपर लेकिन मैं तुम्हें ngAnimate निर्देश का उपयोग करें, और उसके बाद सीएसएस संक्रमण का उपयोग करने की जरूरत है लगता है, here Oficial प्रलेखन से एक उदाहरण है

Answer 2

अगर आप एनजी-चेतन मॉड्यूल शामिल आप उपयोग कर सकते हैं सीएसएस वर्गों (ngAnimate पेज भी पता चलता है जावास्क्रिप्ट में उपयोग करने के लिए कैसे)

http://docs.angularjs.org/api/ngAnimate

<tr ng-repeat="item in items" class="slide"> 
    <td> 
     {{item.value}} 
    </td> 
</tr> 

<style type="text/css"> 
.slide.ng-enter, .slide.ng-leave { 
    -webkit-transition:0.5s linear all; 
    transition:0.5s linear all; 
} 

.slide.ng-enter { }  /* starting animations for enter */ 
.slide.ng-enter-active { } /* terminal animations for enter */ 
.slide.ng-leave { }  /* starting animations for leave */ 
.slide.ng-leave-active { } /* terminal animations for leave */ 
</style> 

में .ng दर्ज करें, .ng-छुट्टी कक्षाएं आप जावास्क्रिप्ट परिभाषित एनिमेशन के लिए जावास्क्रिप्ट नज़र से एनिमेशन ट्रिगर के लिए विशेषता आप एनिमेट करना चाहते हैं, जैसे अस्पष्टता, चौड़ाई, ऊंचाई आदि

में निर्दिष्ट करना होगा ngAnimate पेज

की धारा एनीमेशन उदाहरण के लिए http://www.nganimate.org