You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
30 lines
1.3 KiB
30 lines
1.3 KiB
<script defer src="./contract/js/alpinejs/cdn.min.js"></script>
|
|
<style>
|
|
.opacity-0 { opacity: 0; }
|
|
.opacity-100 { opacity: 1; }
|
|
.transition-slow { transition-duration: 300ms; }
|
|
.transition-medium { transition-duration: 200ms; }
|
|
.transition-faster { transition-duration: 100ms; }
|
|
.scale-90 { transform: scale(0.9); }
|
|
.scale-100 { transform: scale(1); }
|
|
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
|
|
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
|
|
</style>
|
|
|
|
<div x-data="{ items: ['foo', 'bar'] }">
|
|
<input type="checkbox" x-model="items" value="foo">
|
|
<input type="checkbox" x-model="items" value="bar">
|
|
<input type="checkbox" x-model="items" value="baz">
|
|
|
|
<button @click="items = ['bar', 'bob']">hey</button>
|
|
|
|
<template x-for="item in items" :key="item">
|
|
<div x-text="item"
|
|
x-transition:enter-start="opacity-0 scale-90"
|
|
x-transition:enter="ease-out transition-medium"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave="ease-in transition-faster"
|
|
x-transition:leave-end="opacity-0 scale-90"></div>
|
|
</template>
|
|
</div>
|