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]

:+1: This would be an awesome feature!

[jwebcat]

:+1:

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

[image: :+1:] This would be an awesome feature!

— Reply to this email directly or view it on GitHub https://github.com/vuejs/vue/issues/1992#issuecomment-163762361.

[cedamorim]

:+1: 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 :wink:

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.

[smolinari]

Could you gents/ ladies add your works to this forum? http://forum.vuejs.org/category/15/show-tell

Scott

[Twiknight]

@smolinari Already added. Thanks.

[daphen]

A v-swap for changing elements would be a killer feature. (Similar functionality as when changing components with :is="currentView".) So that you can trigger a "refresh" on something like :src if you want to trigger animations when changing stuff.

[Grafikart]

I needed this feature too, I'm getting around creating simple arrays with one item to force VueJS transitions but this solution is a bit messy. Something like

<div v-for="item in [item]" transition="fade">({ item }}</div>

Every time item changes, the transition will be used

It would be awesome to have something simpler and a bit less "hacky"

<div v-swap="item" transition="fade">({ item }}</div>

[matkovsky]

One area where I really miss transitions is CSS class changes. It would be great to be able to assign transitional -enter and -leave classes, when a certain CSS class changes, like in Angular 1.

This would be a great help when, let's say, you're building a responsive site, and you want to hide the mobile sidebar with transition on mobile, but be it always visible on desktop. Today, you cannot do that: if you use v-show, the content disappears (on desktop too), and if you only use pure CSS transitions, then you cannot apply display: none; to the element.

So yeah, I would love to see the ability to add transition-classes to CSS class changes.

[lbineau]

The transition could play nicely with state changes of vuex.

[chrisvfritz]

I quite like many aspects of how react-motion solves this problem. It's not trivial though and certainly not necessary for every app, so it might not make sense in the core library. I think it's an excellent candidate for a 3rd party or maybe even officially supported directive plugin.

[nirazul]

I would love to see something like FLIP implemented as a general transition component, either in core or as a helper library.

[yyx990803]

@Nirazul that's definitely a good idea - this 1.x plugin uses FLIP with v-for and it works great.

[nirazul]

@yyx990803 That's amazing! So there's a chance that this lands in vue some day? ;)

[yyx990803]

FYI this is already possible in 2.0 using the key prop:

<div :key="text" transition="my-transition">{{ text }}</div>

The div will be swapped with transition when text has changed. transition-mode will also work.

In 1.x this can be simulated by using a dummy v-for:

<div v-for="text in textList" transition="my-transition">{{ text }}</div>

You can trigger transitions by manipulating the textList array. transition-mode does not work in this case.

It will be non-trivial to replicate the exact 2.0 behavior in 1.x, and I want to avoid introducing conflicting APIs given that 2.0 is around the corner. So for now I think the recommendation is using the v-for workaround.

[nirazul]

@yyx990803 Do you have a small example fiddle for this in 2.0? I'm not sure how to set up the transition classes based on this 1.x example

[chrisvfritz]

@Nirazul I'm not familiar with the animated list plugin, but it looks like you may have forgotten to Vue.use(VueAnimatedList).

[tonypee]

I am trying to animate using vue transitions, my problem is that i need the elements to remain in the dom, visibly, otherwise the flow changes (i am animating a set of frames in a slider)

i cannot use v-if or v-show, as the inactive elements are hidden

if i use :key="frame == x" it automatically adds/removes the elements within the transition.

is there a way to have the transition classes applied, but not affect the visibility? i might be looking for something which is not possible, but a remaining 'active' would be good too

<div class="slides">
  <div class="slide" />
  <div class="slide slide-active" />
  <div class="slide" />
</div>

[codeofsumit]

@yyx990803 is this still possible in 2.x ? I can't find a "transition" attribute anymore, just the component 🤔

[maxirozay]

@codeofsumit if you're talking about the list yes it is possible check the doc.

You just need a <name>-move class for your transition-group.

[codeofsumit]

@maxirozay no I'm talking about transitioning on change, not in list enter or leave. Like if I have a text: a. I want to change the background color for 5 seconds when the text changes.

[oller]

I too can't seem to replicate the following in Vue 2. My use case is very similar to @tonypee's. In my scenario, I particularly need the callbacks provided by the transitions, but I don't want to hide/show the elements, just move them.

Anyone else have any luck. I see the transition property in the template appears in the DOM as if Vue's not processing that?

FYI this is already possible in 2.0 using the key prop:

<div :key="text" transition="my-transition">{{ text }}</div>

The div will be swapped with transition when text has changed. transition-mode will also work.