html
<body ng-controller="SearchController as searchCtrl">
<div>
<button data-cover="{{searchCtrl.cover.open}}">opener</button>
</div>
<div class="slider">
<h1>Hello Plunker!</h1>
<button data-cover="{{searchCtrl.cover.open}}">closer</button>
</div>
</body>
.css
.slider {
position:fixed;
bottom: 0;
width: 100%;
overflow-y: hidden;
background: white;
max-height: 0;
}
.slider.open {
min-height: 100%;
}
JavaScript
var app = angular.module('plunker', []);
app.controller('SearchController', function() {
var searchCtrl = this;
searchCtrl.cover= {};
searchCtrl.cover.open = false; //initially cover is closed
});
app.directive('cover', cover);
function cover(){
var directive = {
scope: '=',
link : function(scope, ele, attrs){
var slider = angular.element(document.querySelector('.slider'));
ele.bind('click', function(){
if(scope.searchCtrl.cover.open == true){
scope.searchCtrl.cover.open=false;
slider.removeClass("open");
} else{
scope.searchCtrl.cover.open = true;
slider.addClass("open");
}
});
}
}
return directive;
}
我写了一个指令,从下到上打开和关闭一个应该占据整个高度的盖子。我能够做到这一点。现在我想添加动画(封面应该从底部慢慢打开)。对于封面,初始最大高度为"零",后来当我单击"打开"按钮时,我将最小高度设置为"100%"。CSS3 过渡不适用于最小高度属性(仅适用于最大高度)。我没有使用 jquery,所以我不能在指令中使用 jquery animate 函数。我怎样才能以角度的方式做到这一点
在角度更新样式中,您可以像这样使用滑块变量:
slider = document.querySelector('.slider');
slider.style.transition = 'all .3s ease';
slider.style.height = window.innerHeight + 'px';
或翻译到底部
slider = document.querySelector('.slider');
slider.style.transition = 'all .3s ease';
slider.style.transform = 'translate3d(0,100px,0)';
通过多次调整,您可以做到!
PS:您可以对行高属性进行动画处理:)