AngularJS - Let an element be visible for only a few seconds after a value change

Question

I'm observing a few variables which I'm constantly showing on the webpage

Controller:

 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>

Now, I would really like the whole info div to fade out for example 5 seconds after one of the variables has changed (and become visible again for 5 seconds when the values change the next time).

Is something like that even possible with CSS somehow?

You should use $timeout for the delay and ng-animate for the fadeout. If you haven't tried these yet, look them up in Angular's docs, they will be very helpful — William B
– William B, Commented Jun 8, 2016 at 20:49

LatentDenis · Accepted Answer · 2016-06-08 20:52:03Z

2

One way to do this in CSS is with opacity:

.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;
}

Another way in CSS:

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

^ More up to date, using CSS3.

answered Jun 8, 2016 at 20:52

LatentDenis

2,99114 gold badges54 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS - Let an element be visible for only a few seconds after a value change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related