Question

我的控制器中有二维数组，我使用此代码显示：

<div class="line" 
    ng-repeat="line in grid.cells track by $index">

    <span class="cell" 
         ng-class="{c0:(cell==0),c2:(cell==2),c4:(cell==4),c8:(cell==8),c16:(cell==16),c32:(cell==32),c64:(cell==64),c128:(cell==128),c256:(cell==256),c512:(cell==512)}"
         ng-repeat="cell in line track by $index">

        {{ display_value(cell); }}

    </span>
</div>

这里我正在使用ng-class更改SPAN类。

这是CSS的一部分：

span.c0 {
  background-color: #ccc0b3;
  color: #776e65;
}

span.c2 {
  background-color: #eee4da;
  color: #776e65;
}

用户按下按钮并更改控制器中的数组，并自动更新视图：单元格值更改 - ＆gt; span class change - ＆gt; SPAN的颜色变化。但这种变化很快就会发生。

在这种情况下，如何使用某些动画来减缓变化？例如，像这样：http://gabrielecirulli.github.io/2048/。或者一些淡入淡出效果。我需要使用angular的指令，还是CSS的问题？

Answer 1

如果我理解你的话，你只需要css过渡。

以下是一些示例css：

.item 
{
    transition-property: background-color;
    transition-duration: 1s;
}

.item.c1
{
    background-color: green;
}

.item.c2
{
    background-color: blue;
}

这样的HTML：

<div class="row">
    <div class="item c1"></div>
    <div class="item c1"></div>
    <div class="item c1"></div>
    <div class="item c1"></div>
</div>

这里只是一些切换类更改的示例js

var elements = document.querySelectorAll(".row .item");

setInterval(function(){
    for(var a=0; a<elements.length; a++){
        elements[a].classList.toggle("c1");
        elements[a].classList.toggle("c2");
    }
}, 2500);

使用任何动画更改SPAN类

1 个答案:

这是一个jsFiddle演示：http://jsfiddle.net/ychk4g7h/