Установите скорость перехода относительно высоты

Question

Я создаю сворачиваемую директиву в Угловом, и я хотел бы адаптировать скорость открытия/закрытия слайда относительно высоты элементов.

Что-то вдоль линии это:

app.directive('slider', function() { 
    return { 
     restrict: 'A', 
     compile: function (element, attr) { 
      // wrap tag 
      var contents = element.html(); 
      element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>'); 

      return function postLink(scope, element, attrs) { 
       // default properties 
       var dur = ((element.clientHeight/100) * 0.1) + "s"; 
       console.log("duration", dur); 
       attrs.duration = (!attrs.duration) ? dur : attrs.duration; 
       attrs.easing = (!attrs.easing) ? 'ease' : attrs.easing; 
       element.css({ 
        'overflow': 'hidden', 
        'height': '0', 
        'transitionProperty': 'height', 
        'transitionDuration': attrs.duration, 
        'transitionTimingFunction': attrs.easing 
       }); 
      }; 
     } 
    }; 
}); 

app.directive('sliderToggle', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      attrs.expanded = false; 

      element.off("click").bind('click', function (e) { 
       var target = document.querySelector(attrs.sliderToggle); 
       var content = target.querySelector('.slideable_content'); 
       if (!attrs.expanded) { 
        content.style.border = '1px solid rgba(0,0,0,0)'; 
        var y = content.clientHeight; 
        content.style.border = 0; 
        target.style.height = y + 'px'; 
       } else { 
        target.style.height = '0'; 
       } 
       attrs.expanded = !attrs.expanded; 
      }); 
     } 
    } 
}); 

Как вы можете или не можете увидеть, var dur, где я пытаюсь сделать это. Насколько я вижу, это не работает.

Есть ли здесь кто-нибудь, кто может помочь мне в правильном направлении?

Заранее благодарен!

Answer 1

Вы уверены, что attrs.duration не определено? пытаться.

app.directive('slider', function() { 
return { 
    restrict: 'A', 
    compile: function (element, attr) { 
     // wrap tag 
     var contents = element.html(); 
     element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>'); 

     return function postLink(scope, element, attrs) { 
      // default properties 
      var dur = ((element.clientHeight/100) * 0.1) + "s"; 
      if (attrs.duration) { 
       dur = attrs.duration; 
       console.log('using attrs.duration as duration!', attrs.duration) 
      } 
      attrs.easing = (!attrs.easing) ? 'ease' : attrs.easing; 
      $(element).css({ 
       'overflow': 'hidden', 
       'height': '0', 
       'transitionProperty': 'height', 
       'transitionDuration': dur, 
       'transitionTimingFunction': attrs.easing 
      }); 
     }; 
    } 
}; 

});