Question

所以我最近开始学习angularJS，并想了解你是如何做动画的。我确实有使用jQuery的经验，并且知道使用它实现动画是多么容易，但是有角度......不是那么多。

无论如何，代码看起来像这样：

HTML：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script src="js/app.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="js/controllers/indexCtrl.js"></script>
    <link href="css/stylesheet.css" rel="stylesheet"/>
    <link rel="css/animate.css" type="text/css" href="">
    <title>Test</title>
</head>
<body ng-app="myApp" ng-controller="indexCtrl">
    <div ng-repeat="i in vec">
        <div class="test1"><h1>{{i}}</h1></div>
    </div>
</body>
</html>

的CSS：

html,body{
    height: 100vh;
    width: 100vw;
}
.test1{
    width: 100vw;
    height:10vh;
    text-align:center;
    background:red;
    margin-bottom:1vh;
}
.test1.ng-enter{
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

所以我想要学习的是如何淡化重复的元素。

和平。

使用ng-Animate和animate.css进行简单的淡入淡出

0 个答案: