如何为 Angular.js 显示/隐藏添加平滑过渡？
Posted
技术标签:
【中文标题】如何为 Angular.js 显示/隐藏添加平滑过渡？【英文标题】：How to add smooth transition for Angular.js Show/Hide? 【发布时间】：2016-10-02 23:27:06 【问题描述】：我想为隐藏和显示 div 标签进行平滑过渡，但找不到可以使用的好示例。 编辑：通过平滑过渡，我的意思是 div 会在 1-2 秒内崩溃，而不是立即崩溃。 演示：https://jsfiddle.net/p21jLfu4/
<div class="test" ng-show="IsVisible"></div>
【问题讨论】：
没有完全理解问题？请详细说明平滑过渡是什么意思？ 【参考方案1】：这会起作用 - 我只使用了 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;
【讨论】：
跟我想象的完全一样。感谢您提供了一个很好的例子。 !$scope.IsVisible 简直太棒了。谢谢以上是关于如何为 Angular.js 显示/隐藏添加平滑过渡？的主要内容，如果未能解决你的问题，请参考以下文章
如何为 Bootstrap 的 scroll spy 功能添加平滑滚动
Windows 如何为绿色软件运行时添加参数 如最小化,无窗口运行