Unsure of What CSS Property is Not Being Animated

Vote count:

0

I'm currently working on manipulating a CSS Transform Matrix property inside of JavaScript and ran into an issue where a certain property of my transform is not being animated.

My current demo is located here: http://ift.tt/146Fvrt and is designed to work for webkit based browsers at the moment.

What I'm talking about, specifically, is that when a user clicks on a colored rectangle it animates the way I expect it to as it fills the screen. For example: http://goo.gl/wsIDGV

However, when you click on the full screen rectangle there is a sudden change in the size of the rectangle that is a result of (I believe) some CSS property not being animated. See: http://goo.gl/SZhxbL

I am using the transition CSS property to animate the transform in my CSS at line 17

  transition: transform 0.3s ease-in-out;

Changing transform to all doesn't fix the issue due to other CSS properties being animated that cause the animation to stutter or behave in an unexpected fashion.

I manipulate the transform property of the element using the following two functions:

function fill(element) {
  // Set this layer on top of everything
  element.style.zIndex = 2;

  // Set the transformation origin so our scaleY only extends downwards
  element.style.webkitTransformOrigin = '0 0';

  // Since each element takes up a quarter of the available space,
  // scale a single div by the number of divs we have
  element.style.webkitTransform = matrix({ 
    scaleY: divs.length,
    translateY: 0
  });

  element.dataset.expanded = true;
}

function collapse(element) {
  let { offset } = element.dataset;

  // Set this layer on the same plane as every other layer
  element.style.zIndex = 1;

  // Restore the offset value
  element.style.webkitTransform = matrix({ translateY: offset });
  element.dataset.expanded = false;
}

The matrix function takes in whatever values you want to change from the default matrix property and formats it to return a valid transform property value, e.g. matrix(1, 0, 0, 1, 0, 0).

/**
 * Construct a CSS matrix from a specification object
 * @param {Object} spec a specification object that describes
 * the values the matrix will have
 * @return {String} the CSS matrix value
 */
function matrix(spec = {}) {
  const props = {
    scaleX: scaleX(spec),
    scaleY: scaleY(spec),
    skewX: skewX(spec),
    skewY: skewY(spec),
    translateX: translateX(spec),
    translateY: translateY(spec)
  };

  return format(props);
}

My question then is why does the collapse of the element behave differently than when the element expands to fill the screen? Is some property being changed that isn't covered by my transition property declaration that is causing the abrupt change?

Thanks for all the help!

asked 27 secs ago

Josh Black

186

Unsure of What CSS Property is Not Being Animated