gpt4 book ai didi

javascript - 当 ng-show 满足要求时,AngularJS 淡入 div 元素

转载 作者:行者123 更新时间:2023-11-29 10:11:10 24 4
gpt4 key购买 nike

我希望这个淡入淡出类 div 在满足 ng-show 要求时以缓慢的淡入效果显示在页面上。在 jQuery 中,我可以轻而易举地做到这一点,但由于缺乏工作示例,这在 Angular 中被证明是困难的。这是工作代码:

这是index.html:

<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl" class="container" style="padding-top:30px">
<user-info-card></user-info-card>
</body>
</html>

这是script.js:

angular.module('app', []);
angular.module('app').controller('mainCtrl', function($scope) {
$scope.user = {
name: 'Luke Skywalker',
address: {
street: 'PO Box 123',
city: 'Secret Rebel Base',
planet: 'Yavin 4'
},
friends: [
'Han',
'Leia',
'Chewbacca'
],
rank: 'scout',
score: 27
}
});
angular.module('app').directive('userInfoCard', function() {
return {
templateUrl: "userInfoCard.html",
restrict: "E",
controller: function($scope) {
$scope.knightMe = function(user) {
if (user.score > 25) {
user.rank = 'miner';
}
}
}
}
})

这是指令加载的模板文件userInfoCard.html:

<div class="panel panel-primary">
<div class="panel-heading">{{user.name}}</div>
<div class="panel-body">
<div ng-show='!!user.address'>
<h4>Address:</h4>
{{user.address.street}} <br />
{{user.address.city}}<br />
{{user.address.planet}}
</div> <br />

<h4>Friends:</h4>
<ul>
<li ng-repeat='friend in user.friends'>
{{friend}}
</li>
</ul>
<div>
Rank: {{user.rank}}
</div><br>
<div ng-show="user.score >= 25" ng-class="ng-show" class="fade">
<span>Congratulations, you have the ranked up! Click the button below to claim your new rank now.</span><br />
<button class="btn btn-success" ng-click="knightMe(user)">Knight Me</button>
</div>
</div>
</div>

最后但同样重要的是,style.css:

.fade.ng-hide {
opacity: 0;
}
.fade.ng-show {
transition: 0.5s linear all;
opacity: 1;
}

简而言之,当用户得分超过 25 分时(在本例中),我希望淡入淡出类 div 以柔和的淡入方式加载。现在加载正常,但我不确定如何添加效果。感谢您的宝贵时间。

最佳答案

为了给 ngShow/Hide 元素设置动画,你首先需要包含 ngAnimate 模块:

angular.module('app', ['ngAnimate']);

那么你只需要一些小的 CSS 规则:

.fade {
opacity: 1;
}
.fade.ng-hide {
opacity: 0;
}
.fade.ng-hide-remove {
transition: all .5s linear;
display: block !important;
}

演示: http://plnkr.co/edit/qHcMEL2Da5Fome7nUenf?p=info

关于javascript - 当 ng-show 满足要求时,AngularJS 淡入 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33414781/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com