Css 如何为Angular.js显示/隐藏添加平滑过渡？
我想为隐藏和显示div标记做一个平滑的转换，但是找不到一个可以使用的好例子。 编辑：平滑过渡的意思是div将在1-2秒内崩溃，而不是立即崩溃。 演示：Css 如何为Angular.js显示/隐藏添加平滑过渡？,css,angularjs,css-transitions,Css,Angularjs,Css Transitions,我想为隐藏和显示div标记做一个平滑的转换，但是找不到一个可以使用的好例子。 编辑：平滑过渡的意思是div将在1-2秒内崩溃，而不是立即崩溃。 演示： 这将起作用-我只使用了ng类来覆盖高度，最初高度为0px，单击切换时更改为50px。由于css转换，这件事进展顺利 <body> <script type="text/javascript"> var app = angular.module('MyApp', []) app.controller('M
这将起作用-我只使用了ng类来覆盖高度，最初高度为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>
你没有完全理解这个问题吗？请详细说明你所说的平稳过渡是什么意思？正是我所想象的。谢谢你给我一个很好的例子$scope.IsVisible简直太棒了。谢谢
<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>
.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;
}