使用任何动画更改 SPAN 类

Change SPAN class with any animation

本文关键字：SPAN 动画 任何      更新时间：2023-09-26

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

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

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

相关文章：