Convert transition to a transform for better performance

Question

I'm in the process of implementing a 'drawer' type effect where the drawer opens from the bottom of the screen when a button is clicked. Example here: http://jsfiddle.net/jYcSF/

Im using CSS translate to do this:

.drawer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background: #333;
    height: 5px;
    width: 100%;
    -webkit-transition: height .25s linear;
    -moz-transition: height .25s linear;
    transition: height .25s linear;
}

Then I use jQuery to toggle a class on the drawer when the button is clicked:

  $('.drawer-open').click(function(e){
    $('.drawer').toggleClass('active');
  });
  $('.drawer-close').click(function(e){
    $('.drawer').toggleClass('active');
  });

This then allows the .active drawer CSS to take effect and animate the height of the drawer and make it open from the bottom of the screen:

.drawer.active {
    height: 80%;
}

Is it possible to achieve the same effect using CSS transforms rather than transition? I'm trying to ensure the drawer opening is as smooth and jank free as possible.

Answer 1

Simple answer..

No

Its important to understand the reasons and differences behind these CS properties:

Transform

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.

Transition

[...] It allows to define the transition between two states of an element.

In this instance, transform is not a suitable solution, because you are modifying a property (height) instead of the coordinate representation of the element in a 3d space. If you were to use transform the closest you could do would be scaleY and give it a rough value, you would also need to set the origin to a y value of 100% - however what you will notice is that though the element will grow, its contents will be stretched because you have transformed it on the 3d plane, not changed its underlying definitions from a property perspective.

Example Fiddle