我的控制器中有二维数组,我使用以下代码显示:
<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类更改SPAN的类。
这是 CSS 的一部分:
span.c0 {
background-color: #ccc0b3;
color: #776e65;
}
span.c2 {
background-color: #eee4da;
color: #776e65;
}
用户按下按钮并更改控制器中的数组,视图自动更新:单元格值更改 -> span 类更改 -> SPAN 颜色更改。 但这种变化非常快
在这种情况下,如何使用一些动画来减慢更改速度? 例如,像这样的东西:http://gabrielecirulli.github.io/2048/. 或者一些淡入淡出效果。 我需要使用 angular 的指令还是 CSS 的问题?
如果我理解正确,您只需要 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);