angularjs - 似乎无法为 ng-show AngularJS 设置动画
问题描述
当满足 ng-show 条件时,我正在尝试淡入动画。我可以看到 ng-hide 的动画,但看不到 ng-show 的动画。
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angular-animate@1.7.8/angular-animate.js"></script>
<div data-ng-app="myApp" data-ng-controller="myCtrl">
<input type="text" data-ng-model="name"/>
<input type="button" data-ng-click="click()" value="Click"/>
<input type="button" data-ng-click="reset()" value="Reset"/>
<div data-ng-show="bool" class="test">
{{name}}
</div>
</div>
CSS
.test.ng-show{
transition:1s linear all;
opacity:0;
}
.test.ng-show.ng-show-active{
opacity:1;
}
JS
var app=angular.module('myApp',['ngAnimate']);
app.controller('myCtrl',function($scope){
$scope.name='';
$scope.bool=false;
$scope.click=function(){
$scope.bool=true;
};
$scope.reset=function(){
$scope.bool=false;
$scope.name='';
};
});
这是我的代码的JSFiddle的链接。
解决方案
您可以更新 CSS 来实现这一点。点击Toggle
按钮查看更好的动画切换效果。
var app = angular.module('myApp', ['ngAnimate']);
app.controller('myCtrl', function($scope) {
$scope.name = 'Hello World!';
$scope.bool = false;
$scope.click = function() {
$scope.bool = true;
};
$scope.reset = function() {
$scope.bool = false;
$scope.name = '';
};
});
.test.ng-hide-add,
.test.ng-hide-remove {
transition: 1s linear all;
opacity: 1;
}
.test.ng-hide {
opacity: 0;
}
.test{ margin-top:20px;font-size:2rem}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angular-animate@1.7.8/angular-animate.js"></script>
<div data-ng-app="myApp" data-ng-controller="myCtrl">
<input type="text" data-ng-model="name" />
<input type="button" data-ng-click="click()" value="Click" />
<input type="button" data-ng-click="bool = !bool" value="Toggle" />
<input type="button" data-ng-click="reset()" value="Reset" />
<div data-ng-show="bool" class="test">
{{name}}
</div>
</div>
推荐阅读
- python - 如何在python中使用netstat -nb
- objective-c - 领域非托管 RLMArray
- notepad++ - Notepad++ 替换以数字结尾的文本
- javascript - 如何在laravel中使用点击动态链接调用动态模式弹出?
- linux - 哈希目录结构:它有效吗?会有多少文件和目录?
- python - python问题中的cuda
- elixir - 比较 Ecto 中的静态时间
- java - 有人可以解释这个 if-loop 的方法来删除线性列表中的否定吗?
- android - Volley 增加 ThreadPool 大小 Android
- javascript - 在 javascript 中显示 .json 文件中的单个元素