动画与AngularJS动力高度 [英] Animate dynamic height with AngularJS
问题描述
所以，我一直在试图样的动画像角手风琴，但没有成功。我想它有固定的高度，但与活力。身高：汽车;不工作。 （
So, I have been trying to animate kind of like a Angular Accordion, but with no success. I figured it out with fixed heights, but not with dynamic. height: auto; does not work. :(
也许你们中的一些有过类似的问题吗？
Maybe some of you have had a similar problem?
我的code：
HTML：
html:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<section ng-app="myApp">
<div ng-controller="myCtrl as vm">
<ul ng-init="vm.tab=1">
<li ng-repeat="item in vm.data">
<a href ng-click="vm.tab = item.thingy">{{item.name}}</a>
<div ng-show="vm.tab === item.thingy">
<img ng-src="{{item.img}}" width="50px"><br>
<div class="longDiv">{{item.description}}</div>
</div>
</li>
</ul>
</div>
</section>
</body>
</html>
JS：
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope',
function($scope) {
var vm = this;
vm.data = [{
name: "First",
title: "oneTitle",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit ipsum dolor sit amet, consectetur ipsum dolor sit amet, consectetur.",
year: "2013",
img: "http://static.hdw.eweb4.com/media/wp_400/1/5/42735.jpg",
thingy: 1
}, {
name: "third",
title: "twoTitle",
description: "Quisque pulvinar libero sed eros ornare",
year: "2014",
img: "http://static.hdw.eweb4.com/media/wp_400/1/1/8519.jpg",
thingy: 2
}, {
name: "Second",
title: "threeTitle",
description: "Cras accumsan ipsum dolor sit amet, consectetur ipsum dolor sit amet, consectetur ipsum dolor sit amet, consectetur massa vitae tortor vehicula .",
year: "2015",
img: "http://static.hdw.eweb4.com/media/wp_400/1/5/43326.jpg",
thingy: 3
}, {
name: "fourth",
title: "FourTitle",
description: "Suspendisse ipsum dolor sit amet, consectetur ipsum dolor sit amet, consectetur ipsum dolor sit amet, consectetur ipsum dolor sit amet, consectetur ipsum dolor sit amet, consectetur ipsum dolor sit amet, consectetur ipsum dolor sit amet, consectetur ipsum dolor sit amet, consectetur vitae mattis magna.",
year: "2011",
img: "http://static.hdw.eweb4.com/media/wp_400/1/5/42413.jpg",
thingy: 4
}];
}
]);
在此先感谢！
Plnkr 这里
推荐答案
修改@kaiden回答，如果采用了棱角分明的指令可以用
Modified @kaiden answer, if using angular directive can use
require('./').directive('collapse', collapseDirective);
/**
* @ngInject
*/
function collapseDirective() {
return {
restrict: 'A',
link: link
};
function link($scope, ngElement, attributes) {
var element = ngElement[0];
// set the height as a data attr so we can use it again later
element.dataset.heightOld = angular.element(element).prop('offsetHeight');
$scope.$watch(attributes.collapse, function (collapse) {
var newHeight = !collapse ? 0 : element.dataset.heightOld;
element.style.height = newHeight + 'px';
ngElement.toggleClass('collapsed', collapse);
});
}
}
由于链接功能，那么只需添加CSS过渡的高度。这将设置一个数据属性来存储的高度，然后切换时使用它。在我的应用程序中使用的一些标记像
As the link function then just add CSS transitions for height. This sets a data attribute to store the height then uses it when toggling. In my application I used some markup like
<ion-item class="item-accordion" collapse="vm.isActive($index)">
请注意这是一个NG重复内，并呼吁视图模型的功能。这也是离子项目因此离子项目的标签。
Note this is inside an ng-repeat and calls a function on view model. This is also an ionic project hence the ion item tag.
这篇关于动画与AngularJS动力高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
