title: Set transition speed relative to height
body: <p>I'm building a collapsible directive in Angular, and I would like to adapt the slide open/close speed to be relative to the elements' height.</p>
  
  <p>Something along the line of this:</p>
  
  <pre><code>app.directive('slider', function () {
      return {
          restrict: 'A',
          compile: function (element, attr) {
              // wrap tag
              var contents = element.html();
              element.html('&lt;div class="slideable_content" style="margin:0 !important; padding:0 !important" &gt;' + contents + '&lt;/div&gt;');
  
              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;
              });
          }
      }
  });
  </code></pre>
  
  <p>As you may or may not see, <code>var dur</code> is where I try to do this. For as far as I can see, this doesn't work.</p>
  
  <p>Is there someone here who can help me in the right direction?</p>
  
  <p>Thanks in advance!</p>