Kri*_*ine 4 css accordion angularjs jquery-animate
所以,我一直试图像Angular Accordion那样制作动画,但没有成功.我认为它具有固定的高度,但不是动态的.身高:自动; 不起作用.:(
也许你们有些人遇到过类似的问题？
我的代码:
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 在这里
我通过创建"崩溃"指令解决了这个问题:
ngModule.directive('collapse', [function () {
return {
restrict: 'A',
link: function ($scope, ngElement, attributes) {
var element = ngElement[0];
$scope.$watch(attributes.collapse, function (collapse) {
var newHeight = collapse ? 0 : getElementAutoHeight();
element.style.height = newHeight +"px";
ngElement.toggleClass('collapsed', collapse);
});
function getElementAutoHeight() {
var currentHeight = getElementCurrentHeight();
element.style.height = 'auto';
var autoHeight = getElementCurrentHeight();
element.style.height = currentHeight +"px";
getElementCurrentHeight(); // Force the browser to recalc height after moving it back to normal
return autoHeight;
}
function getElementCurrentHeight() {
return element.offsetHeight
}
}
};
}]);
要使用该指令,只需将其抛出到元素上并将其设置为范围变量,该变量指示是否将其折叠:
<div collapse="isCollapsed">
This will be collapsed
</div>
现在,您只需要在高度上应用CSS过渡,它将平滑地折叠和展开.由于此指令还添加了一个类,因此您可以应用其他过渡,例如不透明度.
这是Codepen的一个例子:http://codepen.io/KaidenR/pen/GoRJLx
您可以尝试将 max-height 设置为 0，然后按照此处的建议删除样式/类：
http://css3.bradshawenterprises.com/animating_height/