【问题标题】:How to add smooth transition for Angular.js Show/Hide?如何为 Angular.js 显示/隐藏添加平滑过渡?
【发布时间】:2016-10-02 23:27:06
【问题描述】:

我想为隐藏和显示 div 标签进行平滑过渡,但找不到可以使用的好示例。
编辑:通过平滑过渡,我的意思是 div 会在 1-2 秒内崩溃,而不是立即崩溃。 演示:https://jsfiddle.net/p21jLfu4/

<div class="test" ng-show="IsVisible"></div>

【问题讨论】:

  • 没有完全理解问题?请详细说明平滑过渡是什么意思?

标签: css angularjs css-transitions


【解决方案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 简直太棒了。谢谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-08-20
  • 2022-12-14
  • 1970-01-01
  • 2020-12-14
  • 1970-01-01
相关资源
最近更新 更多