我想在满足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/[email protected]/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
按钮以查看更好的动画切换效果。