Heim > Artikel > Web-Frontend > H5 von 13__CSS-Übergängen, Animationen und Transformationen

H5 von 13__CSS-Übergängen, Animationen und Transformationen

黄舟Original: 2017-02-18 15:04:372398Durchsuche

1. Einführung

Auf Touch-Geräten ist Animation das Feedback von Benutzergesten.

In allen Browsern wird JS in einem einzigen Thread ausgeführt sind asynchrone Aufgaben wie setTimeOut(), die zur Ausführungswarteschlange hinzugefügt und dann ausgeführt werden, wenn der Thread inaktiv wird.

Wenn der Code im Timer ausgeführt wird, können andere Codes nicht ausgeführt werden. Das heißt, Event-Handler werden in der Reihenfolge der Warteschlange ausgeführt.

Aus diesen Gründen sollten wir versuchen, die Verwendung von setTimeOut zu vermeiden ( ) Animation, Sie können CSS-Übergänge verwenden, um den gleichen Effekt zu erzielen, und das Erlebnis ist besser.

2. Übergänge

CSS-Übergänge können verwendet werden Die einfachste Animation umgesetzt. Die Stärke von Übergängen besteht darin, dass sie in einem separaten Thread vom JS-Ausführungsthread ausgeführt werden.

Verwenden Sie Animationen, um eine dynamischere Benutzeroberfläche zu erhalten und dennoch dafür zu sorgen, dass Event-Handler schnell laufen.

Eine Idee: Jede animierbare CSS-Eigenschaft kann mithilfe eines Übergangs animiert werden.

Änderungen im Wert einer animierten CSS-Eigenschaft lösen eine Animation aus. Verwenden Sie die CSS-Übergangseigenschaft, um Übergänge anzuwenden.

Die Syntax lautet wie folgt:

Übergang: [Eigenschaft] [Dauer] [Timing-Funktion] [Verzögerung] ;

Alle Werte sind optional

Zum Beispiel: Übergang: Farbe 1s Easeout, gibt einen Übergang an, bei dem die Farbänderung über eine Sekunde hinweg allmählich langsamer wird Standard, aber es erfordert immer noch ein Präfix, um in Browsern mit WebKit-Kern verwendet zu werden.

In IE-, Opera- und Firefox-Browsern ist kein Präfix erforderlich.

Sehen Sie sich einen Code an, ein Beispiel für das Ausblenden und Anzeigen eines Bildes, wenn eine Schaltfläche berührt wird:

<body>
	<p id="touchme">
		<button class="button" id="toggle" style="width:100%; height:60px;">Toggle Picture</button>
		<p  class="picture hidden">
			<br/><br/>
			<a><img src="http://img1.2345.com/duoteimg/qqTxImg/2012/04/09/13339510584349.jpg"
					 width="320" height="256" alt="Goldfinch">
			</a>
		</p>
	</p>
</body>

über CSS Übergang anwenden

/***应用过渡 ***/
.picture {
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  opacity: 1;
}
.picture.hidden {
  opacity: 0;
}

Sehen Sie sich das an Rendering:

Die vollständige HTML-Seite lautet wie folgt:




	
	
	
	Touch
	

<body>
	<p id="touchme">
		<button class="button" id="toggle" style="width:100%; height:60px;">Toggle Picture</button>
		<p  class="picture hidden">
			<br/><br/>
			<a><img src="http://img1.2345.com/duoteimg/qqTxImg/2012/04/09/13339510584349.jpg"
					 width="320" height="256" alt="Goldfinch">
			</a>
		</p>
	</p>
</body>

Die CSS-Datei lautet wie folgt:

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  text-align: center;
}

.button {
  font-size: 16px;
  padding: 10px;
  font-weight: bold;
  border: 0;
  color: #fff;
  border-radius: 10px;
  box-shadow: inset 0px 1px 3px #fff, 0px 1px 2px #000;
  background: #ff3019;
  opacity: 1;
}

.active, .button:active {
  box-shadow: inset 0px 1px 3px #000, 0px 1px 2px #fff;
}

/***应用过渡 ***/
.picture {
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  opacity: 1;
}
.picture.hidden {
  opacity: 0;
}

Das Obige ist das Inhalt von H5 13__CSS-Übergang, Animation und Transformation, bitte achten Sie auf weitere verwandte Inhalte auf der chinesischen PHP-Website (www.php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：H5-12__Touch and Click: Grundlegende EreignisverarbeitungNächster Artikel：H5-12__Touch and Click: Grundlegende Ereignisverarbeitung

In Verbindung stehende Artikel

Mehr sehen