Question

我希望能够平滑过渡以隐藏和显示div标签，但找不到我可以使用的好例子。
编辑：平滑过渡我的意思是div会在1-2秒内崩溃而不是立即崩溃。的演示： https://jsfiddle.net/p21jLfu4/

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

Answer 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;
}

如何为Angular.js显示/隐藏添加平滑过渡？

1 个答案: