Skip to content
This repository was archived by the owner on Jun 12, 2021. It is now read-only.
This repository was archived by the owner on Jun 12, 2021. It is now read-only.

x-bind not evaluating x-transition directive callback #14

@hdahlheim

Description

@hdahlheim

Hey Caleb, I tried to update from v2 to v3 today and noticed that x-bind does not evaluate the x-transition directive callback. It works fine when the directive value is just a string.

I get the following error using the CDN build:

cdn.js:1460 Uncaught TypeError: classString2.split is not a function
    at missingClasses (cdn.js:1460)
    at setClassesFromString (cdn.js:1468)
    at setClasses (cdn.js:1456)
    at Object.start (cdn.js:1704)
    at cdn.js:1754
    at mutateDom (cdn.js:125)
    at performTransition (cdn.js:1753)
    at transition (cdn.js:1702)
    at Object.in (cdn.js:1635)
    at HTMLDivElement.window.Element._x_toggleAndCascadeWithTransitions (cdn.js:1657)

I made a repo to demonstrate the issue with a v3 and a v2 example. In v2, it works as expected.
https://github.com/hdahlheim/alpine-v3-x-bind-transition-bug

In short, to save you a few clicks

// x-bind with directives like this works
['x-transition:enter']: "transition ease-out duration-100",

// x-bind with directives link this should work but does not
['x-transition:enter']() {
     return "transition ease-out duration-100"
},

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions