Javascript 以角度方式在“最小高度”属性上设置动画
htmlJavascript 以角度方式在“最小高度”属性上设置动画,javascript,css,angularjs,Javascript,Css,Angularjs,html <body ng-controller="SearchController as searchCtrl"> <div> <button data-cover="{{searchCtrl.cover.open}}">opener</button> </div> <div class="slider"> <h1>Hello Plunker!</h1>
<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>
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：您可以设置线条高度属性：）的动画。在角度更新样式中，您可以像这样使用滑块变量：
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)';