Merge pull request #492 from alpinejs/next-tick-fix

Fix transition nextTick

dist/alpine-ie11.js

@@ -5467,7 +5467,11 @@
         return index < modifiers.indexOf('out');
       }.bind(this)) : modifiers;
       transitionHelperIn(el, modifiers, show); // Otherwise, we can assume x-transition:enter.
-    } else if (attrs.length > 0) {
+    } else if (attrs.filter(function (attr) {
+      _newArrowCheck(this, _this4);
+
+      return ['enter', 'enter-start', 'enter-end'].includes(attr.value);
+    }.bind(this)).length > 0) {
       transitionClassesIn(el, attrs, show);
     } else {
       // If neither, just show that damn thing.
@@ -5492,7 +5496,11 @@
         return index > modifiers.indexOf('out');
       }.bind(this)) : modifiers;
       transitionHelperOut(el, modifiers, settingBothSidesOfTransition, hide);
-    } else if (attrs.length > 0) {
+    } else if (attrs.filter(function (attr) {
+      _newArrowCheck(this, _this5);
+
+      return ['leave', 'leave-start', 'leave-end'].includes(attr.value);
+    }.bind(this)).length > 0) {
       transitionClassesOut(el, attrs, hide);
     } else {
       hide();

dist/alpine.js

@@ -165,7 +165,7 @@
 
       modifiers = settingBothSidesOfTransition ? modifiers.filter((i, index) => index < modifiers.indexOf('out')) : modifiers;
       transitionHelperIn(el, modifiers, show); // Otherwise, we can assume x-transition:enter.
-    } else if (attrs.length > 0) {
+    } else if (attrs.filter(attr => ['enter', 'enter-start', 'enter-end'].includes(attr.value)).length > 0) {
       transitionClassesIn(el, attrs, show);
     } else {
       // If neither, just show that damn thing.
@@ -183,7 +183,7 @@
       const settingBothSidesOfTransition = modifiers.includes('in') && modifiers.includes('out');
       modifiers = settingBothSidesOfTransition ? modifiers.filter((i, index) => index > modifiers.indexOf('out')) : modifiers;
       transitionHelperOut(el, modifiers, settingBothSidesOfTransition, hide);
-    } else if (attrs.length > 0) {
+    } else if (attrs.filter(attr => ['leave', 'leave-start', 'leave-end'].includes(attr.value)).length > 0) {
       transitionClassesOut(el, attrs, hide);
     } else {
       hide();

src/utils.js

@@ -151,7 +151,7 @@ export function transitionIn(el, show, forceSkip = false) {
 
         transitionHelperIn(el, modifiers, show)
     // Otherwise, we can assume x-transition:enter.
-    } else if (attrs.length > 0) {
+    } else if (attrs.filter(attr => ['enter', 'enter-start', 'enter-end'].includes(attr.value)).length > 0) {
         transitionClassesIn(el, attrs, show)
     } else {
     // If neither, just show that damn thing.
@@ -176,7 +176,7 @@ export function transitionOut(el, hide, forceSkip = false) {
             ? modifiers.filter((i, index) => index > modifiers.indexOf('out')) : modifiers
 
         transitionHelperOut(el, modifiers, settingBothSidesOfTransition, hide)
-    } else if (attrs.length > 0) {
+    } else if (attrs.filter(attr => ['leave', 'leave-start', 'leave-end'].includes(attr.value)).length > 0) {
         transitionClassesOut(el, attrs, hide)
     } else {
         hide()

test/transition.spec.js

@@ -1,5 +1,6 @@
 import Alpine from 'alpinejs'
 import { wait } from '@testing-library/dom'
+const timeout = ms => new Promise(resolve => setTimeout(resolve, ms))
 
 global.MutationObserver = class {
     observe() {}
@@ -145,6 +146,68 @@ test('transition out', async () => {
     )
 })
 
+test('if only transition leave directives are present, don\'t transition in at all', async () => {
+    var frameStack = []
+
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
+        frameStack.push(callback)
+    });
+
+    document.body.innerHTML = `
+        <div x-data="{ show: false }">
+            <button x-on:click="show = ! show"></button>
+
+            <span x-show="show"
+                x-transition:leave="leave"
+                x-transition:leave-start="leave-start"
+                x-transition:leave-end="leave-end"
+            ></span>
+        </div>
+    `
+
+    Alpine.start()
+
+    await wait(() => { expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;') })
+
+    document.querySelector('button').click()
+
+    await timeout(10)
+
+    expect(frameStack.length).toEqual(0)
+    expect(document.querySelector('span').getAttribute('style')).toEqual(null)
+})
+
+test('if only transition enter directives are present, don\'t transition out at all', async () => {
+    var frameStack = []
+
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
+        frameStack.push(callback)
+    });
+
+    document.body.innerHTML = `
+        <div x-data="{ show: true }">
+            <button x-on:click="show = ! show"></button>
+
+            <span x-show="show"
+                x-transition:enter="enter"
+                x-transition:enter-start="enter-start"
+                x-transition:enter-end="enter-end"
+            ></span>
+        </div>
+    `
+
+    Alpine.start()
+
+    await wait(() => { expect(document.querySelector('span').getAttribute('style')).toEqual(null) })
+
+    document.querySelector('button').click()
+
+    await timeout(10)
+
+    expect(frameStack.length).toEqual(0)
+    expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;')
+})
+
 test('original class attribute classes are preserved after transition finishes', async () => {
     var frameStack = []