CODEWITHSUNDEEP
cssangularjsng-animate
methuselah
methuselah

Reputation: 13206

Fade in image on page load

How would I fade in an image on page load using Angular JS, currently this is my code on AngularJS, but it doesn't work (based off of: http://plnkr.co/edit/ncqEB3PafIWbwv0UH1QG?p=preview)

View

<object type="image/svg+xml" data="img/logo-blue.svg" class="navbar-logo" ng-class="{'fade-in': vm.fade }"></object>

Controller

vm.fade = true;

CSS

.animation { opacity:0; transition:all 200ms ease-in-out; }

.animation.fade-in { opacity:1; }

Upvotes: 0

Views: 1593

Answers (3)

Susan Rodgers
Susan Rodgers

Reputation: 1

I did it with one line of javascript and one css style.

This went right before the element that I wanted to fade in:

<div id = 'fadewrap' >    
<script>
document.getElementById("fadewrap").style.opacity = 1;                      
</script>


#fadewrap {
    opacity: 0;
   -webkit-transition: all 1.75s ease;
   -moz-transition: all 1.75s ease;
   -ms-transition: all 1.75s ease;
   -o-transition: all 1.75s ease;
    transition: all 1.75s ease;     
}

Upvotes: 0

Kamlesh Uikey
Kamlesh Uikey

Reputation: 101

You forget to add animate class on you object tag

<object type="image/svg+xml" data="img/logo-blue.svg" class="animation navbar-logo" ng-class="{'fade-in': vm.fade }"></object>

Upvotes: 1

Sergio Diez
Sergio Diez

Reputation: 409

You need to add the class="animation" to the object element

Upvotes: 1

Related Questions