如何平滑地显示带背景的块和带有角和ngAnimate的文本？
如何平滑地显示带背景的块和带有角和ngAnimate的文本？
提问于 2018-11-02 09:36:10
我是新来的JS和Angular。我试着为我的背景和文字制作ng-显示和ng-隐藏。问题是我的文字:我可以顺利地隐藏它，但当它显示-我首先得到所有的文本，然后我得到我的后台。我怎么才能修好它？
联署材料：
var app = angular.module('myApp', ['ngAnimate']);CSS：
div {
overflow: visible;
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
overflow: hidden;
height: 0;
opacity: 0;
}HTML：
<input type="checkbox" ng-model="myCheck"/>
<div ng-show="myCheck">
Many text here<br/>
Many text here<br/>
Many text here<br/>
Many text here<br/>
Many text here<br/>
Many text here<br/>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-11-02 11:04:16
您可以为div指定一个类，并使用ng隐藏转换来控制动画。
下面是一个简单的演示：
var app = angular.module('myApp', ['ngAnimate']);
app.controller('myCtrl', function($scope) {
$scope.myCheck = false;
});.myClass {
overflow: visible;
background-color: lightblue;
height: auto;
transition: all 0.5s ease-in-out;
transform: translateY(0);
}
.myClass.ng-hide {
transform: translateY(-100%);
}
.myClass.ng-hide-remove,
.myClass.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
.myClass.ng-hide-add,
.myClass.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" ng-model="myCheck" />
<span>{{myCheck?'Hide':'Show'}}</span>
<div class="myClass" ng-show="myCheck">
Many text here<br/> Many text here<br/> Many text here<br/> Many text here<br/> Many text here<br/> Many text here<br/>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53115988
复制相关文章
相似问题
腾讯云开发者
