CSS Transitions

Siehe auch

• Fallback mit modernizr.js
• CSS Transitions - Snippets

CSS Transitions

http://www.pepe-juergens.de/2013/01/css3-transitions-hover-effekte/#komplexe-transition gutes Tutorial

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'; 
}