Question

我有一个侧窗格，每个项目都有一个平移。与此类似https://angular.io/docs/js/latest/api/。

当我点击某个项目时，我希望它能够制作一个平滑的过渡动画。

我的标记：

var form = document.forms["name_of_your_form"];
form.onsubmit = function(){
  localStorage.setItem("fname", form.elements["fname"].value);
  localStorage.setItem("email", form.elements["email"].value);
}
window.onload = function() {
  form.elements["fname"].value = localStorage.getItem("fname");
  form.elements["email"].value = localStorage.getItem("email");
}

如果未选择某个项目，则会向其添加课程<div ng-repeat="item in mainCategories" class="main-list" ng-class="{'not-selected': item !== currentMainCategory}" > <p>{{item.title}}</p> </div> <div class="sub-categories"> <div ng-repeat="subCategory in item.subCategories" class="sub-categories-content" ng-click="setSubCategory(subCategory)"> <p>{{subCategory.title}}</p> </div> </div> </div>。

这是我的css：

not selected

因此，当没有选择项目时，高度为50px。选择项目时，高度取决于当前子类别中的项目数。

问题是，当我无法定义高度时，动画无效。我可以给.main-list{ //I need to define a height here transition: 200ms cubic-bezier(0.4, 0, 1, 1); } .not-selected{ height:50px; }任何高度属性，所以动画有效吗？

Answer 1

以下是我的评论中建议的如何使用ng-style的简单示例。运行下面的代码段以查看其运行情况并查看相应的CSS。

  <div ng-repeat="item in main">
    <div class="maincat" ng-click="active($index)">
      <p>{{item.title}}</p>
    </div>
    <div class="animate" ng-style="{height: item.active ? item.sub.length*30+'px' : '0px'}">
      <div ng-repeat="subitem in item.sub" class="subcat">
        <p>{{subitem.title}}</p>
      </div>
    </div>
  </div>

var app = angular.module('demo.app', ['ngAnimate']);

app.controller('MainCtrl', ['$scope', function($scope){
  $scope.main = [{title: 'main1', sub: [{title: 'sub1'}, {title: 'sub2'}, {title: 'sub3'}]},{title: 'main2', sub: [{title: 'sub1'}, {title: 'sub2'}]}];
  $scope.active = function(idx) {
    $scope.main[idx].active = !$scope.main[idx].active;
  };
}]);

@import url("//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css");

.maincat {
  height: 30px;
  background-color: #ccc;
  width: 50%;
  padding: 3px 5px;
  cursor: pointer;
  border-bottom: 1px solid #555;
}

.subcat {
  height: 30px;
  background-color: #eee;
  width: 50%;
  padding: 3px 5px;
}

.animate {
  -webkit-transition: height linear 0.5s;
  transition: height linear 0.5s;
  overflow: hidden;
}

<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-animate.js"></script>

<div class="container" ng-app="demo.app" ng-controller="MainCtrl">
  <h1 class="h3">Expandable Menu Demo</h1>
  <div ng-repeat="item in main">
    <div class="maincat" ng-click="active($index)">
      <p>{{item.title}}</p>
    </div>
    <div class="animate" ng-style="{height: item.active ? item.sub.length*30+'px' : '0px'}">
      <div ng-repeat="subitem in item.sub" class="subcat">
        <p>{{subitem.title}}</p>
      </div>
    </div>
  </div>
</div>

Answer 2

CSS转换需要一个属性，该效果将应用于声明。为了指定转换引用height属性，您应该将代码更改为：

transition: height 200ms cubic-bezier(0.4, 0, 1, 1);

没有定义高度，角度的CSS动画

2 个答案: