|
@@ -18,7 +18,7 @@
|
|
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
|
|
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
|
|
</style>
|
|
</style>
|
|
|
|
|
|
- <script src="https://polyfill.io/v3/polyfill.js?features=MutationObserver%2CArray.from%2CArray.prototype.forEach%2CMap%2CSet%2CArray.prototype.includes%2CString.prototype.includes%2CPromise%2CNodeList.prototype.forEach%2CObject.values%2CReflect%2CReflect.set%2CString.prototype.startsWith%2CArray.prototype.find%2CArray.prototype.findIndex%2CElement.prototype.closest%2CElement.prototype.remove%2CCustomEvent%2CElement.prototype.classList"></script>
|
|
|
|
|
|
+ <script src="https://polyfill.io/v3/polyfill.js?features=MutationObserver%2CArray.from%2CArray.prototype.forEach%2CMap%2CSet%2CArray.prototype.includes%2CString.prototype.includes%2CPromise%2CNodeList.prototype.forEach%2CObject.values%2CReflect%2CReflect.set%2CString.prototype.startsWith%2CArray.prototype.find%2CArray.prototype.findIndex%2CElement.prototype.closest%2CElement.prototype.remove%2CCustomEvent%2CElement.prototype.classList%2CHTMLTemplateElement"></script>
|
|
<script src="https://unpkg.com/shim-selected-options" async></script>
|
|
<script src="https://unpkg.com/shim-selected-options" async></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>
|
|
|
|
|
|
@@ -210,6 +210,30 @@
|
|
</script>
|
|
</script>
|
|
</td>
|
|
</td>
|
|
</tr>
|
|
</tr>
|
|
|
|
+
|
|
|
|
+ <tr>
|
|
|
|
+ <td>x-for</td>
|
|
|
|
+ <td>
|
|
|
|
+ <div x-data="{ items: ['foo', 'bar'], 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>
|
|
|
|
+ </td>
|
|
|
|
+ </tr>
|
|
|
|
+
|
|
<tr>
|
|
<tr>
|
|
<td>Transitions</td>
|
|
<td>Transitions</td>
|
|
<td>
|
|
<td>
|