以角度方式在最小高度属性上动画化

Animate on min-height property in Angular way

本文关键字：属性 高度 动画 小高 方式      更新时间：2023-09-26

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：您可以对行高属性进行动画处理:)

相关文章：