CSS Transitions

Siehe auch

• Fallback mit modernizr.js
• CSS Transitions - Snippets
• https://www.youtube.com/watch?v=8kK-cA99SA0 gute Einführung
• http://www.pepe-juergens.de/2013/01/css3-transitions-hover-effekte/#komplexe-transition gutes Tutorial

CSS Transitions

Prinzip

Um über transitions ein Element zu Animieren geht man in zwei Schritten vor.

1. Art der Transition für mindestens eine Eigenschaft des Element festlegen (z.B. width, opacity, color, left, transform,...)
2. Eigenschaft des Elements ändern (JavaScript, :hover...)

Die Eigenschaft ändert sich nun in kleinen Schritten über die Zeit und nicht mehr auf einmal.

Die transition CSS Eigenschaft ist eine Kurzschreibweise für

transition-property 
transition-duration
transition-timing-function
transition-delay

In Kurzform sieht das so aus

.animateMe{
  transition: [property] [duration] [ease] [delay];
}

Beispiel

.animateMe{
  transition: opacity 300ms ease-out 0.5s;
}

Hier wird die Opacity des Elements

Performante Transitions

Es gibt Eigenschaften, die besser Animiert werden können, da der Browser sie mit wenig Aufwand berechnen kann. Eine Bewegung mit den

top // bad
left // bad
transform: translate(npx, npx) // good

Immer wenn der Browser das komplette Layout neu berechnet wird es haarig. Wenn es geht sollte man also diese Eigenschaften nutzen:

transform: translate(npx, npx);
transform: scale(n);
transform: rotate(ndeg);
transform: opacity;

Man kann die Performance des Renderings in den Developer Tools in der Timeline anschauen. Evtl. gut könnte auch. Color oder die perspective Tools sein (mal testen)

CSS Transitions mit JavaScript kontrollieren

https://css-tricks.com/controlling-css-animations-transitions-javascript/ Sehr gutes und umfangreiches Tutorial.

Zusammenfassung:

• To trigger an element's transition, toggle a class name on that element that triggers it.
• To pause an element's transition, use getComputedStyle and getPropertyValue at the point in the transition you want to pause it. Then set those CSS properties of that element equal to those values you just got.

document.getElementsByClassName('toggleButton')[0].onclick = function() {
  if(this.innerHTML === 'Play') 
  { 
    this.innerHTML = 'Pause';
    boxOne.classList.add('horizTranslate');
  } else {
    this.innerHTML = 'Play';
    var computedStyle = window.getComputedStyle(boxOne),
        marginLeft = computedStyle.getPropertyValue('margin-left');
    boxOne.style.marginLeft = marginLeft;
    boxOne.classList.remove('horizTranslate');    
  }  
}

$('.toggleButton:eq(1)').on('click', function() { 
  if($(this).html() === 'Play') 
  {
    $(this).html('Pause');
    $boxTwo.addClass('horizTranslate');
  } else {
    $(this).html('Play');
    var computedStyle = $boxTwo.css('margin-left');
    $boxTwo.removeClass('horizTranslate');
    $boxTwo.css('margin-left', computedStyle);
  }  
});

Page Transitions

https://www.smashingmagazine.com/2016/07/improving-user-flow-through-page-transitions/ (moderner Ansatz mit AJAX der sich an Apps orientiert).

https://css-tricks.com/add-page-transitions-css-smoothstate-js/ (einfache Einführung mit smoothstate.js

Transition End Event

http://stackoverflow.com/questions/5023514/how-do-i-normalize-css3-transition-functions-across-browsers

function transitionEndEventName () {
    var i,
        undefined,
        el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

    for (i in transitions) {
        if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
            return transitions[i];
        }
    }

    //TODO: throw 'TransitionEnd event is not supported in this browser'; 
}