CSS Transitions

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