Acionando animações e transições CSS
Important: this documentation is not applicable to your currently selected format stories!
As animações CSS permitem que elementos da Web façam a transição de uma configuração de estilo CSS para outra. O navegador pode iniciar animações definidas durante a carga, mas animações CSS acionadas por eventos dependem da adição e remoção de classes. AMP suporta os dois tipos de animação.
Use CSS quando tiver uma animação menor e contida que não precise ser cronometrada com precisão.
Definindo CSS e keyframes
Você pode definir CSS no AMP das seguintes maneiras:
- Dentro da tag
<style amp-custom>
no interior do bloco head do documento. Limite de 75,000 bytes. - Estilos inline. Cada instância de um estilo inline tem um limite de 1.000 bytes. Os estilos inline contam para o limite de 75.000 bytes do
<style amp-custom>
. - Dentro da tag
<style amp-keyframes>
no interior do bloco head do documento. Limite de 500.000 bytes. Restrito a propriedades de keyframe.
Para manter suas páginas magras e velozes, o AMP impôs um limite de 75.000 bytes ao CSS na tag <amp style-custom>
. Embora você possa definir estilos de animação usando essa tag, o limite de 500.000 bytes na tag <amp style-keyframes>
permite animações mais detalhadas que não tiram recursos preciosos dos estilos do site.
<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>
Adicionando, removendo e alternando classes
A ação AMP, toggleClass
ativa a adição e remoção de classes em elementos definidos.
elementName.toggleClass(class="className")
Você pode alternar uma classe no mesmo elemento com o qual você quer que os usuários interajam, como, por exemplo, um menu de hambúrguer animado.
<div id="hamburger" tabindex=1 role=button on="tap:hamburger.toggleClass(class='close')">
A ação toggleClass
também pode ser aplicada a outros elementos e alternar entre duas classes adicionando o atributo force
.
<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>
Se você precisar remover uma classe e impedir a reaplicação, adicione o atributo force
com valor false
. Se você precisar adicionar uma classe e impedir a remoção, adicione force
com valor true
.
Animações com CSS e estado
Você pode adicionar e remover qualquer quantidade de classes CSS com estados usando amp-bind
.
<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>
Defina múltiplas animações de classe primeiro adicionando uma lista de classes CSS na tag <style amp-custom>
no bloco head
do documento:
.visible { opacity: 1; } .invisible { opacity: 0; } .left { transform: translatex(-50px) } .right { transform: translatex(50px) }
Em seguida, emparelhe cada classe com um estado:
<amp-state id="magicBox"> <script type="application/json"> { "visibleBox": { "className": "visible" }, "invisibleBox": { "className": "invisible" }, "moveLeft": { "className": "left" }, "moveRight": { "className": "right" } } </script> </amp-state>
E associe o elemento às classes:
<div [class]="magicBox[animateBox].className"> </div>
Os estados mudam em uma ação ou evento AMP associado. O exemplo a seguir altera o estado a partir da interação do usuário:
<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>
Usando amp-bind
dessa maneira, defina a classe explicitamente para a classe definida. Você não precisa mandá-la remover as outras classes.