最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Animate table as rows are added - Stack Overflow

programmeradmin4浏览0评论

I currently have the following piece of angular code:

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

Along with the following snippet of html:

<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>

As expected, each time I click Add Row a new row is added with the text Hello, World!.

How can I extend this so that the newly added row glows or flashes as it appears for a brief moment? The idea being that in the real app the item will be added dynamically without a button click so I'd like to draw the users attention to the newly added item.

I currently have the following piece of angular code:

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

Along with the following snippet of html:

<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>

As expected, each time I click Add Row a new row is added with the text Hello, World!.

How can I extend this so that the newly added row glows or flashes as it appears for a brief moment? The idea being that in the real app the item will be added dynamically without a button click so I'd like to draw the users attention to the newly added item.

Share Improve this question edited Apr 7, 2014 at 18:33 Alaeddine 1,6972 gold badges26 silver badges48 bronze badges asked Apr 7, 2014 at 18:29 imrichardcoleimrichardcole 4,6954 gold badges26 silver badges49 bronze badges 5
  • are you using/including the ng-animate module? – Patrick Evans Commented Apr 7, 2014 at 18:36
  • stackoverflow./questions/1907748/… – NoWar Commented Apr 7, 2014 at 18:38
  • @Clark, Those access the dom directly which you shouldn't do in angular, unless in a directive. – Patrick Evans Commented Apr 7, 2014 at 18:39
  • I'm currently not using jQuery, just angular. @PatrickEvans I'm currently only using what you see above. Is ng-animate the way forward without relying on jQuery? – imrichardcole Commented Apr 7, 2014 at 18:41
  • Try to check this stackoverflow./questions/22111411/… – NoWar Commented Apr 7, 2014 at 18:43
Add a ment  | 

2 Answers 2

Reset to default 4

if you include the ng-animate module you can use css classes(the ngAnimate page also shows how to use in javascript)

http://docs.angularjs/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>

in the .ng-enter, .ng-leave classes you would specify the attribute you would want to animate, eg opacity,width,height etc

For triggering animations from javascript look for the JavaScript-defined Animations section of the ngAnimate page

For animation examples see http://www.nganimate

im not a great angular developer but i think you need to use the ngAnimate directive, and then use css transitions, here is an example from the oficial documentation

发布评论

评论列表(0)

  1. 暂无评论