Bearbeiten von „CSS Transitions“

== CSS Transitions ==

== 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'''.

<pre>
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);
  }  
});
</pre>