Question

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;

}

我写了一个指令，从下到上打开和关闭一个应该占据整个高度的封面。我能够做到这一点。现在我想添加动画（封面应该从底部缓慢打开）。对于覆盖，初始最大高度为＆＃34;零＆＃34;，稍后当我点击＆＃34;打开＆＃34;按钮，我将最小高度设为＆＃34; 100％＆＃34;。 CSS3过渡不适用于最小高度属性（仅在最大高度上）。我没有使用jquery，所以我不能在指令中使用Jquery animate函数。我怎么能以棱角分明的方式做到这一点

Answer 1

在角度更新样式中，您可以像这样使用滑块变量：

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：你可以为行高属性设置动画：）

以Angular方式为min-height属性设置动画

1 个答案: