Auslösen von CSS Animationen und Übergängen
CSS Animationen erlauben Webelementen, von einer CSS Stylekonfiguration zu einer anderen zu wechseln. Während der Browser definierte Animationen beim Laden starten kann, sind ereignisgesteuerte CSS Animationen vom Hinzufügen und Entfernen von Klassen abhängig. AMP unterstützt beide Animationstypen.
Verwende CSS, wenn du eine kleinere eingebundene Animation hast, die keine präzise Zeitsteuerung erfordert.
Definieren von CSS und Keyframes
CSS lässt sich in AMP wie folgt definieren:
- Innerhalb des Tags
<style amp-custom>
im Header des Dokuments. Limit 75.000 Byte. - Inline Styles. Jede Instanz eines Inline Styles hat ein Limit von 1.000 Byte. Inline Styles werden auf das Limit von 75.000 Byte von
<style amp-custom>
angerechnet. - Innerhalb des Tags
<style amp-keyframes>
im Header des Dokuments. Limit 500.000 Byte. Auf Keyframe Eigenschaften beschränkt.
Um deine Seiten schlank und schnell zu halten, hat AMP im Tag <amp style-custom>
ein CSS Limit von 75.000 Byte festgelegt. Während du dies zum Definieren von Animationsstyles verwenden kannst, ermöglicht das Limit von 500.000 Byte innerhalb des Tags <amp style-keyframes>
ausführlichere Animationen, die keine wertvollen Ressourcen für den Website Style rauben.
<style amp-custom>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
}
</style>
</head>
<body>
<div></div>
<style amp-keyframes>
@keyframes mymove {
0% {transform: translatey(0px);}
25% {transform: translatey(200px);}
75% {transform: translatey(50px);}
100% {transform: translatey(100px);}
}
</style>
</body>
Klassen hinzufügen, entfernen und umschalten
Die AMP Aktion toggleClass
ermöglicht es, Klassen für definierte Elemente hinzuzufügen und zu entfernen.
elementName.toggleClass(class="className")
Du kannst eine Klasse auf dasselbe Element umschalten, mit dem Benutzer interagieren sollen, z. B. ein animiertes Hamburgermenü.
<div
id="hamburger"
tabindex="1"
role="button"
on="tap:hamburger.toggleClass(class='close')"
></div>
Die Aktion toggleClass
kann auch auf andere Elemente angewendet werden und durch Hinzufügen des Attributs force
zwischen zwei Klassen umschalten.
<button
on="tap:magicBox.toggleClass(class='invisible', force=true),magicBox.toggleClass(class='visible', force=false)"
>
Disappear
</button>
<button
on="tap:magicBox.toggleClass(class='visible', force=true),magicBox.toggleClass(class='invisible', force=false)"
>
Reappear
</button>
Wenn du eine Klasse entfernen und eine erneute Anwendung verbieten willst, füge das Attribut force
mit dem Wert false
hinzu. Wenn du eine Klasse hinzufügen und das Entfernen verbieten willst, füge force
mit dem Wert true
hinzu.
Mit CSS und Status animieren
Mit amp-bind
kannst du beliebig viele CSS Klassen mit Status hinzufügen und entfernen.
<head>
<script
async
custom-element="amp-bind"
src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
></script>
<style amp-custom>
div {
height: 100px;
width: 100px;
margin: 1em;
background-color: green;
margin-left: 100px;
transition: 2s;
}
.visible {
opacity: 1;
}
.invisible {
opacity: 0;
}
.left {
transform: translatex(-50px);
}
.right {
transform: translatex(50px);
}
button {
margin-top: 1rem;
margin-left: 1rem;
}
</style>
</head>
<body>
<amp-state id="magicBox">
<script type="application/json">
{
"visibleBox": {
"className": "visible"
},
"invisibleBox": {
"className": "invisible"
},
"moveLeft": {
"className": "left"
},
"moveRight": {
"className": "right"
}
}
</script>
</amp-state>
<div [class]="magicBox[animateBox].className"></div>
<button on="tap:AMP.setState({animateBox: 'invisibleBox'})">Disappear</button>
<button on="tap:AMP.setState({animateBox: 'visibleBox'})">Reappear</button>
<button on="tap:AMP.setState({animateBox: 'moveLeft'})">Move Left</button>
<button on="tap:AMP.setState({animateBox: 'moveRight'})">Move Right</button>
</body>
Definiere mehrere Klassenanimationen, indem du zuerst eine Liste von CSS Klassen innerhalb des Tags <style amp-custom>
im head
des Dokuments hinzufügst:
.visible {
opacity: 1;
}
.invisible {
opacity: 0;
}
.left {
transform: translatex(-50px);
}
.right {
transform: translatex(50px);
}
Kopple dann jede Klasse mit einem Status:
<amp-state id="magicBox">
<script type="application/json">
{
"visibleBox": {
"className": "visible"
},
"invisibleBox": {
"className": "invisible"
},
"moveLeft": {
"className": "left"
},
"moveRight": {
"className": "right"
}
}
</script>
</amp-state>
Verknüpfe anschließend das Element mit den Klassen:
<div [class]="magicBox[animateBox].className"></div>
Die Statusvarianten ändern sich bei einer verknüpften AMP Aktion oder eines verknüpften AMP Events. Das folgende Beispiel ändert den Status bei Benutzerinteraktion:
<button on="tap:AMP.setState({animateBox: 'invisibleBox'})">Disappear</button>
<button on="tap:AMP.setState({animateBox: 'visibleBox'})">Reappear</button>
<button on="tap:AMP.setState({animateBox: 'moveLeft'})">Move Left</button>
<button on="tap:AMP.setState({animateBox: 'moveRight'})">Move Right</button>
Wenn du amp-bind
auf diese Weise verwendest, wird die Klasse explizit auf die definierte Klasse gesetzt. Eine Anweisung zum Entfernen anderer Klassen ist nicht erforderlich.