Question

我有一个HTML，CSS和AngularJS应用程序我的html中有div，我在其中显示一些文字，如下所示：

<div id='myDiv'>{{myScope.details}}</div>

当我从控制器内部change myScope.details变量时，我想在更新myDiv时为myScope.details设置动画。简而言之，当更新div中的文本时，我希望div能够进行动画处理。如何使用HTML和CSS完成这项工作？

Answer 1

之前我做过类似的事情，这个指令会起作用：

app.directive("animateOnChange", function($timeout) {
    return {
        restrict: "A",
        link: function (scope, element, attr) {
            element.addClass('animate-change');
            scope.$watch(attr.animateOnChange, function(newvalue, oldvalue) {
                if (newvalue != oldvalue) {
                    element.removeClass("changed");
                    $timeout(function() {
                        element.addClass("changed");
                    });
                }
            })
        }
    }
});

你的css中有一些动画：

.changed {
    -webkit-animation: highlight-fade 1s ease-in 1;
    animation: highlight-fade 1s ease-in 1;
}

@-webkit-keyframes highlight-fade {
    0% {border: 3px solid yellow;}
    100% {border: 3px solid transparent;}
}
@keyframes highlight-fade {
    0% {border: 3px solid yellow;}
    100% {border: 3px solid transparent;}
}

有关示例，请参阅this jsfiddle。

更新div中的文本时动画div

1 个答案: