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。

AngularJS - 让值元素在值更改后仅显示几秒钟

1 个答案: