S Kalra S Kalra - 3 months ago 8
Javascript Question

ng-image-appear- not working

I go through a link below..

AngularJS Module to make images appear with transition as they load.

codepen link

I use it in my application but not getting tranisition and animation effects

HTML:

<div ng-app="myApp">
<div ng-controller="myCtrl">
<img class="img1" src="https://newevolutiondesigns.com/images/freebies/tropical-beach-background-8.jpg" ng-image-appear responsive transition-duration="1s" animation="fadeInUp" animation-duration="1s" easing="ease-out" />
</div>
</div>


Angular:

var myApp = angular.module('myApp', ['ngImageAppear']);

myApp.controller('myCtrl', ['$scope', function($scope) {

}]);


CSS:

body {
background-color: #aaa;
}

.img1 {
width: 60%;
height: auto;
}

.img2 {
width: 70px;
height: auto;
}

.img3 {
width: 450px;
height: auto;
}

.loader-class {
background-color: rgba(255, 255, 255, .65);
}

.placeholder-class {
background-size: contain;
}

Answer

You need to add the references to your project,

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js
https://cdn.jsdelivr.net/angular.image-appear/1.11.3/ng-image-appear.min.js