CSS Transitions - Versionsgeschichte

37.49.72.8 am 22. Januar 2020 um 10:44 Uhr

2020-01-22T10:44:17Z

37.49.32.84 am 29. Mai 2017 um 13:17 Uhr

2017-05-29T13:17:17Z

37.49.32.84 am 29. Mai 2017 um 13:17 Uhr

2017-05-29T13:17:02Z

37.49.32.84: /* CSS Transitions mit JavaScript kontrollieren */

2017-05-29T13:16:14Z

CSS Transitions mit JavaScript kontrollieren

37.49.32.84 am 6. Februar 2017 um 13:31 Uhr

2017-02-06T13:31:58Z

37.49.32.84 am 6. Februar 2017 um 09:18 Uhr

2017-02-06T09:18:18Z

37.49.32.84: /* CSS Transitions */

2017-01-20T11:10:46Z

CSS Transitions

37.49.32.84: Die Seite wurde neu angelegt: „== CSS Transitions == == CSS Transitions mit JavaScript kontrollieren == https://css-tricks.com/controlling-css-animations-transitions-javascript/ Sehr gutes…“

2017-01-20T10:10:59Z

Die Seite wurde neu angelegt: „== CSS Transitions == == CSS Transitions mit JavaScript kontrollieren == https://css-tricks.com/controlling-css-animations-transitions-javascript/ Sehr gutes…“

Neue Seite

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

@@ Zeile 2: / Zeile 2: @@
 * Fallback mit modernizr.js
 * [[CSS Transitions - Snippets]]
 == CSS Transitions ==
-http://www.pepe-juergens.de/2013/01/css3-transitions-hover-effekte/#komplexe-transition gutes Tutorial
+=== Prinzip ===
 == CSS Transitions mit JavaScript kontrollieren ==

@@ Zeile 1: / Zeile 1: @@
 Siehe auch
 * Fallback mit modernizr.js
-* CSS Transitions - Snippets
+* [[CSS Transitions - Snippets]]
 == CSS Transitions ==

← Nächstältere Version		Version vom 29. Mai 2017, 13:16 Uhr
Zeile 3:		Zeile 3:

	== CSS Transitions mit JavaScript kontrollieren ==		== CSS Transitions mit JavaScript kontrollieren ==
		+	Siehe auch
		+	* Fallback mit modernizr.js
		+
	https://css-tricks.com/controlling-css-animations-transitions-javascript/ Sehr gutes und umfangreiches Tutorial.		https://css-tricks.com/controlling-css-animations-transitions-javascript/ Sehr gutes und umfangreiches Tutorial.

← Nächstältere Version		Version vom 6. Februar 2017, 13:31 Uhr
Zeile 43:		Zeile 43:

	https://css-tricks.com/add-page-transitions-css-smoothstate-js/ (einfache Einführung mit smoothstate.js		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
		+	<pre>
		+	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';
		+	}
		+	</pre>

← Nächstältere Version		Version vom 6. Februar 2017, 09:18 Uhr
Zeile 38:		Zeile 38:
	});		});
	</pre>		</pre>
		+
		+	== 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

← Nächstältere Version		Version vom 20. Januar 2017, 11:10 Uhr
Zeile 1:		Zeile 1:
	== CSS Transitions ==		== CSS Transitions ==
		+	http://www.pepe-juergens.de/2013/01/css3-transitions-hover-effekte/#komplexe-transition gutes Tutorial

	== CSS Transitions mit JavaScript kontrollieren ==		== CSS Transitions mit JavaScript kontrollieren ==