`effects` or `transitions` option ?

[ayamflow]

Hi y'all,

I see in the guide: JavaScript effects can be registered with Vue.effect() or passed inside the effects option. In the instantiation options guide, I don't see effects but only transitions, I guess it's a little mistake from the name change (transition>effect).

However, I can't manage to make my enter/leave instantiation options to be recognized.

I tried with both transitionsand effects since I didn't know if the change had been made to the source. I tried applying the v-transition but the doc says it's only for CSS. I can't use the v-effect either because it needs a transition registerd by Vue.effect, which I didn't use in this example.

Simple JSFiddle here.

Is this a bug or a brainfart from me ?

[marfalkov]

Don't forget to register your effect via Vue.effect()

http://jsfiddle.net/marfalkov/GMCEs/

[yyx990803]

JavaScript transitions have been renamed to effects to better differentiate between CSS transitions, CSS animations and JavaScript effects. You need to pass it in the options with a name:

Vue.component('child', {
    // ...
    effects: {
        // "tween" is the effect ID
        tween: childTransitions
    }
});

Then you need to specify the effect with v-effect:

<h1 id="child" v-component="child" v-if="childVisible" v-effect="tween">{{greet}}</h1>

Fixed fiddle: http://jsfiddle.net/yyx990803/UnDWM/2/ Docs here: http://vuejs.org/guide/transitions.html#javascript-functions

[ayamflow]

This 'aha' moment, just needed to nest the object. Thanks !

[jola16]

Nice! I had tried to use the javascript effects, but the docs weren't enough for my brains to understand..., but now with the jsfiddle example I finally got it! Thanks!

For learning more, I extended your jsfiddle into an Accordion list with a nice slideTransition. http://jsfiddle.net/jola16/v24SV/ It works quite nice, but I now run into a different problem:

How can/should a parent VM access its children VMs (created by a v-repeat)? I ended up with this ugly code accessing the internal state of the parent VM:

                var childCompilers = this.$compiler.childCompilers;
                for (i = 0; i < childCompilers.length; i++) {
                    var childItem = childCompilers[i].vm;
                    ...

I guess/hope there is some other better way?

[yyx990803]

@jola16 yes, you can use the v-ref directive together with v-repeat.

[jola16]

Aha, found the answer in the docs here: http://vuejs.org/guide/composition.html#Accessing_Child_Components

When v-ref is used together with v-repeat, the value you get will be an Array containing the child components mirroring the data Array.

My Accordion-jsfiddle now use the v-ref and it works fine!