我想实现隐藏和显示 div 标签的平滑过渡，但找不到可以使用的好示例。
编辑:平滑过渡是指 div 会在 1-2 秒内崩溃，而不是立即崩溃。
演示: https://jsfiddle.net/p21jLfu4/
<div class="test" ng-show="IsVisible"></div>
最佳答案
这会起作用 - 我只使用 ng-class 来覆盖高度，最初高度为 0px，单击(切换)时更改为 50px。由于 css 转换，这件事工作顺利
<body>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function($scope) {
//This will hide the DIV by default.
$scope.IsVisible = false;
$scope.ShowHide = function() {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisible = !$scope.IsVisible;
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="SHOW/HIDE" ng-click="ShowHide()" />
<br />
<br />
<div class="test" ng-class="{'divOpen': IsVisible}"></div>
</div>
</body>
在你的CSS中
.test {
background: red;
width: 200px;
height: 0px;
margin-top: -18px;
-webkit-transition: height 2s;-moz-transition: height 2s ease-in-out;-ms-transition: height 2s ease-in-out;
-o-transition: height 2s ease-in-out;transition: height 2s;
}
.divOpen{
height: 50px;
}
关于css - 如何为 Angular.js 显示/隐藏添加平滑过渡？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37605180/