css - AngularJS：使用平滑动画增加降低div高度 - Thinbug

AngularJS：使用平滑动画增加降低div高度

时间：2017-06-20 13:51:35

标签： css angularjs css-animations

我试图通过平滑动画来增加降低div高度，但由于对css动画的良好控制而无法这样做。

这是我的代码

<body ng-app="ang_app" ng-controller="ang_control01_main">
    <input type="checkbox" ng-model="myCheck">
    <div id="myDiv" ng-show="myCheck" class="animate-show animate-hide"></div>
</body>

var app=angular.module('ang_app', ['ngAnimate']);
    app.controller('ang_control01_main', function($scope) {

});

CSS

.animate-hide {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}

#myDiv {

    transition: .5s;
    background-color: lightblue;
    height: 100px;
}

#myDiv.ng-hide {
    transition: .5s;
    height: 0;
}

请检查此网站https://codepen.io/LFeh/pen/ICkwe当我们将鼠标悬停并指出时，必须注意它们如何很好地增加降低div高度。如何在我的情况下实现相同的平滑效果。

1 个答案:

答案 0 :(得分：0)

它似乎工作正常 - 您确定已包含对angular-animate.js的脚本引用吗？以下是展开和折叠过渡的工作示例：

angular.module('app', ['ngAnimate']);

.animate-hide {
  transition: all linear .5s;
}

#myDiv {
  background-color: lightblue;
  height: 100px;
}

#myDiv.ng-hide {
  height: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-animate.min.js"></script>

<body ng-app="app">
  <input type="checkbox" ng-model="myCheck">
  <div id="myDiv" ng-show="myCheck" class="animate-hide"></div>
</body>