Snackbars animados memberikan komentar singkat tentang operasi melalui pesan di bagian bawah layar.
Anda harus amp-bind untuk mengaktifkan Snackbar
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
dan amp-animasi untuk menampilkan dan menyembunyikan Snackbar.
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
Animasi
Kami ingin menunjukkan snackbar yang menghilang setelah beberapa detik. Ini dapat dengan mudah dicapai dengan menambahkan kelas CSS menggunakan amp-bind untuk menampilkan bilah Snackbar & nbsp; dan kemudian menggunakan animasi CSS untuk menyembunyikan bilah Snackbar setelah beberapa detik. Namun, dengan pendekatan ini tidak mungkin untuk mengaktifkan Snackbar beberapa kali (kelas CSS yang baru ditambahkan tidak hilang).
Kami dapat mengatasi masalah ini menggunakan ekstensi amp-animasi, memungkinkan untuk menjalankan animasi berulang kali. Kami mendefinisikan animasi yang akan meluncur di snack bar dan kemudian menyembunyikannya setelah beberapa detik menggunakan atribut offset untuk menyinkronkan berbagai kerangka kunci.
<amp-animation id="snackbarSlideIn"
layout="nodisplay">
<script type="application/json">
[{
"duration": "3s",
"fill": "both",
"easing": "ease-out",
"iterations": "1",
"selector": ".snackbar",
"keyframes": [{
"transform": "translateY(100%)"
},
{
"transform": "translateY(0)",
"offset": 0.1
},
{
"transform": "translateY(0)",
"offset": 0.9
},
{
"transform": "translateY(100%)"
}
]
}]
</script>
</amp-animation>
Snackbar
Snackbar adalah div yang berisi pesan. Ini akan hilang setelah beberapa detik, jadi kami tidak akan menyediakan tombol tambahan untuk menyembunyikan bilah secara manual. Pesan teks ditautkan ke variabel amp-state sehingga isinya dapat dikonfigurasi. Ini tidak perlu jika Anda harus selalu menampilkan pesan yang sama.
<div class="snackbar" [text]="message"> Hello World </div>
The Trigger
Animasi bilah makanan ringan diaktifkan melalui tindakan restart "restart": on = "ketuk: snackbarSlideIn.restart". Kami menggunakan tindakan mulai ulang untuk mengaktifkan pembatalan animasi yang sudah aktif. Bidang input hanya memperbarui status amp-variabel yang berisi pesan bilah.
Contohnya<div class="trigger"> <input on="input-debounced:AMP.setState({message: event.value})" value="Hello World"> <button on="tap:snackbarSlideIn.restart"> Show Snackbar </button> </div>