angularjs - ng-动画 : Animation when model changes

标签 angularjs ng-animate

我创建了一个表,用户可以在其中增加和减少值。
Fiddle

//sample code as its not allowing me to push the link to JSFiddle with out pasting code

   <tr ng-repeat="d in dataSource" ng-animate="'animate'">

// css - as from angular page
.animate-enter {
    -webkit-transition: 1s linear all; /* Chrome */
    transition: 1s linear all;
    background-color:Yellow;
}

.animate-enter.animate-enter-active {
    background-color:Red;
}

我想在模型更新时做动画,即表格列的背景颜色从红色变为白色,以防用户更改值。

因此,当您单击任何特定列中的向上箭头或向下箭头时,该表列的背景颜色将从红色变为白色。

我无法理解它。关于如何实现这一目标的任何指示?

最佳答案

在 Angular 1.5 中你可以使用 ngAnimateSwap内置指令。

从文档:

ngAnimateSwap is a animation-oriented directive that allows for the container to be removed and entered in whenever the associated expression changes. A common usecase for this directive is a rotating banner or slider component which contains one image being present at a time. When the active image changes then the old image will perform a leave animation and the new element will be inserted via an enter animation.

关于angularjs - ng-动画 : Animation when model changes,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20053557/

相关文章:

angularjs - 将服务/工厂注入(inject)指令

javascript - 如何设置 Angular ui-router 状态,以便主模板不会在每次状态更改时刷新?

javascript - ng-animate 无法在 angularjs 1.1.5 中与 ng-show 一起使用

javascript - newrelic 与 Angular 应用程序

jquery - Angular 无法在使用 jquery 加载函数加载的 div 上工作

javascript - 如何使用 ngAnimate 在 CSS 类之间制作动画?

javascript - Angular 交错动画自定义指令

javascript - ngAnimate CSS 动画不适用于 ng-show 和 ng-hide

javascript - 更改 NG-Click 功能

javascript - Google Chart - 容器未定义