How to have an fade-in and an fade-out transition at the same time ?

[stijink]

Hey,

first of all. Awesome project. I'm just fiddeling with it. I already added a transition.

<animated-fade-in-down>
    <NewPhotos v-show="isVisible" />
</animated-fade-in-down>

What i now want to have an fade-in transition and a fade-out transition for an element at the same time. So when the element gets visible the fade-in transition starts and when the element looses visibility the fade-out transition starts. Is this possible ?

I already tried to stack the transitions. But that doesn't seem to work.

<animated-fade-in-down>
<animated-fade-out-down>
    <NewPhotos v-show="isVisible" />
</animated-fade-out-down>
</animated-fade-in-down>

Thanks, Stephan

[dragonautdev]

Hey Stephan,

Thanks a lot for your words about the library. Regarding your question, you will need a custom transition and your use case was exactly why I had the idea of creating the "GenericTransition" class you can find here.

The idea is that you will need to define a new transition that works just as you need, based on the GenericTransition functional component. That class's constructor receives 4 parameters:

/**
   * Constructor for the GenericTransition class
   * @param  {String}  name                 The transition's name
   * @param  {String}  [enterTransition=''] animate.css class to assign to a transition's enterActiveClass. Defaults to ''
   * @param  {String}  [leaveTransition=''] animate.css class to assign to a transition's leaveActiveClass. Defaults to ''
   * @param  {Boolean} [isGroup=false]      Whether to render this transition as 'transition' or 'transition-group' component
   * @return {Object}                       The new instance.
   */
constructor (name, enterTransition = '', leaveTransition = '', isGroup = false) {

So, for your case you just need to define a component that's a new instance of the GenericTransition component with whatever name you want to give it, and the right enter and leave transitions. Here's how you should use it:

// In the same script as you configure your vue instance:
import GenericTransition from 'animated-vue/common/generic-transition'

/* Do your vue setup here, including Vue.use(AnimatedVue);*/ 

// now you generate your new transition:
// fadeInDown is an animate.css' animation class.
// fadeOutDown is also an animate.css' animation class for fading leave transitions.
// the last parameter, "true", indicates this is a transition that should work upon a group of elements and not just one. 
var myCustomTransition = new GenericTransition('custom-fade-in-out-down', 'fadeInDown', 'fadeOutDown', true);

// the next line makes your transition globally-available throughout all your components.
Vue.component(myCustomTransition.name, myCustomTransition);

Now, in your photo-library component you can do something as follows:

<custom-fade-in-out-down>
    <NewPhotos v-show="isVisible" />
</custom-fade-in-out-down>

Please let me know if this helps you, but also feel free to ask away any questions you have.

Cheers!

[stijink]

Thank you for your quick and helpful response :-)

[stijink]

Hey :-)

I just implemented your suggested solution. Everything seems to work as expected. Only the leaveTransition doesn't seem to work. It doesn't matter what animation i declare as the leaving transition. So i guess it's not a typo :)

Any clue or hint for what i could look for ?

/**
 * custom-transition.ts
 */
import GenericTransition from 'animated-vue/src/common/generic-transition';

/**
 * The first parameter is the animation's name, the second is the "enter" animation,
 * the third one is the "leave" animation, while the last parameter marks if the transition
 * is a group transition or not (**false** for "single" and **true** for "group")
 * @type {Object}
 */
export default new GenericTransition('custom-transition', 'bounceInDown', 'bounceOutDown', false);

/*
 * App.vue (simplified)
 */

<template>
    <v-app>

          <custom-transition>
            <new-photos v-show="isVisible" />
          </custom-transition>

         <v-btn v-show="!isVisible" @click="toggleVisibility()">Show</v-btn>
         <v-btn v-show="isVisible"  @click="toggleVisibility()">Hide</v-btn>

    </v-app>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  import NewPhotos from './components/NewPhotos.vue';
  import CustomTransition from './custom-transition';

  @Component({
    components: {
      'new-photos' : NewPhotos,
      'custom-transition' : CustomTransition,
    },
  })

  export default class App extends Vue {
    public isVisible: boolean = true;

    public toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
</script>

[stijink]

@srodriki Did you see my additional question ? :)

[cberthiaume]

I wanted to chime in with both the kind words about this useful library as well as to report that I am seeing the same issue with leaving transitions as @stijink. I cannot get it to fire even after making a custom transition. The entering transitions work well.

[cberthiaume]

Here's an example demonstrating the problem.

https://codesandbox.io/s/9jz75vzp1o

Removing an item does not show the fade out animation. If you change the tag at line 5 of HelloWorld.vue to animated-group-fade-in it will properly fade in the items when you click "Add item".

[dragonautdev]

Hey everyone! I just merged a PR that should fix this issue!