AngularJS - 让元素在值更改后仅可见几秒钟

Question

我观察到一些变量，我经常在网页上显示这些变量

控制器：

 self.mapView.watch('center,scale,zoom', function() {
     $scope.$applyAsync('vm.mapView');
 });

.HTML：

<div id="info">
      <strong>LAT</strong> {{ vm.mapView.center.latitude | number:3 }}
      <strong>LNG</strong> {{ vm.mapView.center.longitude | number:3 }}    
</div>

现在，我真的希望整个信息div在其中一个变量更改后 5 秒淡出（并在下次值更改时再次可见 5 秒）。

CSS甚至可能以某种方式实现这样的事情吗？

Answer 1

在CSS中执行此操作的一种方法是使用不透明度：

.altered-element.hide-opacity{
    opacity: 0;
}
.altered-element {
    color: #FFFFFF;
    text-align: center;
    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;
}

CSS 中的另一种方式：

http://www.aspneto.com/fade-in-and-fade-out-effect-using-css3-transition.html

^ 更多最新的，使用CSS3。