javascript - ng-image-appear-不起作用

我通过下面的链接。

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

codepen link

我在应用程序中使用了它，但没有获得过渡效果和动画效果

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>

角度：

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

最佳答案

您需要将引用添加到您的项目中，

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