触发 CSS 动画和过渡
Important: this documentation is not applicable to your currently selected format email!
通过 CSS 动画,网络元素可以从一种 CSS 样式配置过渡到另一种。浏览器可以在加载时启动定义的动画,但事件触发的 CSS 动画则取决于类的添加和移除。AMP 同时支持这两种动画类型。
如果您的动画较小且独立,并且不需要精确计时,可以使用 CSS。
定义 CSS 和关键帧
可以按以下方式在 AMP 中定义 CSS:
<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>
添加、移除和切换类
通过 AMP 操作 toggleClass
,可以在定义的元素中添加和移除类。
elementName.toggleClass(class="className")
您可以在希望用户与之互动的同一元素(例如,添加动画效果的汉堡菜单)上切换类。
<div id="hamburger" tabindex=1 role=button on="tap:hamburger.toggleClass(class='close')">
另外,toggleClass
操作也可以应用到其他元素,添加 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>
如果您需要移除一个类,并且不允许重新应用该类,可以添加 force
属性并将值设置为 false
。如果您需要添加一个类,并且不允许将其移除,可以添加 force
属性并将值设置为 true
。
使用 CSS 和状态添加动画效果
使用 amp-bind
可以添加和移除任意数量的 CSS 类和状态。
<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>
首先,在文档 head
的 <style amp-custom>
标记中添加一组 CSS 类,借此定义多个类动画:
.visible { opacity: 1; } .invisible { opacity: 0; } .left { transform: translatex(-50px) } .right { transform: translatex(50px) }
然后,将每个类与一种状态配对:
<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>
状态将根据关联的 AMP 操作或事件发生变化。以下示例根据用户互动来更改状态:
<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>
按上述方式使用 amp-bind
会将类明确设置为定义的类。您不必告知它移除其他类。