Bladeren bron

add HTMLTemplateElement to polyfill to get x-if to work.

Keyur Shah 5 jaren geleden
bovenliggende
commit
886c1a3ef3
1 gewijzigde bestanden met toevoegingen van 25 en 1 verwijderingen
  1. 25 1
      examples/index_ie11.html

+ 25 - 1
examples/index_ie11.html

@@ -18,7 +18,7 @@
             .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
     </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://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>
 
@@ -210,6 +210,30 @@
                     </script>
                 </td>
             </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>
                 <td>Transitions</td>
                 <td>