Transitions for everything

[lbineau]

Hi,

I see that transitions are just for show/hide an element. I would it be easy to make it available on any property so the transition would play between changing state ? (lets call it state property)
Example :

<div v-state="state" transition="my-transition"></div>

Vue.transition('expand', {

  beforeStateEnter: function (el) {
    el.textContent = 'beforeEnter'
  },
  stateEnter: function (el) {
    el.textContent = 'enter'
  },
...

})

[jbrialon]

+1 great idea lbineau, it would be nice :)

[young-steveo]

👍 This would be an awesome feature!

[jwebcat]

👍

On Thu, Dec 10, 2015, 2:02 PM Stephen Young notifications@github.com
wrote:

[image: 👍] This would be an awesome feature!

—
Reply to this email directly or view it on GitHub
#1992 (comment).

[cedamorim]

👍
Why not something like the Polymer Neon Animation ?

[Twiknight]

It's possible to trigger a css transition on your demand at any time with a SMIL style vue-component.

1. you define a custom transition component,
2. lay it inside the directive you want to perform the transition
3. inject the component's play method into its $parent component.

then you can call the transition whenever you like.

---

I'll finish such a component and publish it in a few days if I've time.

[lbineau]

@Twiknight It is a nice idea but in my opinion the javascript transition object is a really powerful feature because you can can hook each state of the animation, pause it etc.
I don't know enough vuejs, do you think it be a big effort to implement an extension of transition in order to apply it on any property ?

[Twiknight]

@lbineau

You don't need hooks if you can control a transition.
If you need to know when the animation is done, just listen to animationend event. A possible way, you can return a promise in animationComponent.play.

[Twiknight]

https://jsfiddle.net/Twiknight/bftLgo0e/

This is a demo.
@lbineau

[simplesmiler]

Angular has a similar concept, ng-animate-swap.

[simplesmiler]

On the other hand, you can pretty much simulate it with v-for="item in [item]".
Demo: https://jsfiddle.net/simplesmiler/ske810z2/2/

[smolinari]

That is pretty cool @simplesmiler. It shows the elegance of Vue, doesn't it?

Scott

[simplesmiler]

@smolinari I believe it can be done in angular in the same way 😉

The only missing piece is analogue of transition-mode from components.

[smolinari]

Probably, but vue is still much more elegant than angular.

Scott

[Twiknight]

https://github.com/Twiknight/vue-transition

The solution I mentioned.
I'll add animation later this week.