Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Transition class bind null values has DOMException in addClass function. #4050

Closed
sean220 opened this issue Oct 28, 2016 · 5 comments
Closed

Transition class bind null values has DOMException in addClass function. #4050

sean220 opened this issue Oct 28, 2016 · 5 comments

Comments

@sean220
Copy link

sean220 commented Oct 28, 2016 •
edited

Vue.js version

2.0.1

<transition :enter-active-class="animatedIn" >

When 'animateIn' bind value is empty string or null,addClass function has exception:

vue.js:4540 Uncaught (in promise) DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty

Semantically,Binding a null value is intended to remove the transition effect.
Should a null check be made in addClass function or the transition should be ignored in the case of null values?
@phanan
Copy link
Member

phanan commented Oct 28, 2016

Actually I can't reproduce this. Can you provide a fiddle?

@sean220
Copy link
Author

sean220 commented Oct 28, 2016

jsfiddle repro

@phanan
Copy link
Member

phanan commented Oct 28, 2016

Thanks. IMHO the addClass and removeClass functions should check for falsy values and warn if in development. Will work on a PR.

phanan pushed a commit to phanan-forks/vue that referenced this issue Oct 28, 2016
Check and warn for falsy class names (fixes vuejs#4050)
07f5e1e 
This commit adds a check for falsy names (null or empty string) before
attempting to add or remove them, to prevent a DOM exception. A warning
will also be triggered if in development env.
@yyx990803
Copy link
Member

What do you mean by "cancel"? Are you trying to interrupt an ongoing animation and make it snap to the end state, or to "turn off" the transition so that it doesn't trigger anymore?

In either case, setting the bound class to null or empty string is the wrong way to do it. There's no way to "interrupt" an already triggered transition, but you can revert it by toggling the state controlling the element inside.

As for "turning off", we could probably add a disabled prop for transition components. For now the workaround is just using v-ifto toggle between a transition-wrapped and non-transition-wrapped version of the same element.

yyx990803 pushed a commit that referenced this issue Nov 1, 2016
@phanan @yyx990803
Check and warn for falsy class names (fixes #4050) (#4051)
a632d60 
This commit adds a check for falsy names (null or empty string) before
attempting to add or remove them, to prevent a DOM exception. A warning
will also be triggered if in development env.
@sean220
Copy link
Author

sean220 commented Nov 1, 2016

For my case, It is turn off the transition effect,But at some point, Instead of remove the entire effect use 'v-if', May I just remove one of enter or leave effect? @yyx990803

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@yyx990803 @sean220 @phanan