1

I'm trying to implement exactly this carousel/slide effect using Vue transition-group:

Example GIF

As you can see, they are animating one list item (step) at a time where the previous step goes up and the current one goes up with its content following the timeline.

I'm not sure what I am trying to accomplish is possible using transition-group, since the whole parent block will animate, not it's children nodes. If that is the case, I would be happy if I could at least animate the parent block.

Another caveat is that, as I am using transition-group without v-if, or without a filtered list, all steps are being rendered by default which isn't good.

This is my HTML structure:

<transition-group class="steps-viewport" name="steps" tag="div">
  <div v-for="step in currentStep" :key="step.order" class="step-wrapper">
    <h3 class="is-size-5 mb-6 has-text-grey-light">
      Passo {{ step.order }}
    </h3>
    <h1 class="is-size-3">{{ step.title }}</h1>
    <h2 class="is-size-4 mt-2 has-text-grey">{{ step.headline }}</h2>
    <component
      class="mt-5"
      v-bind:is="step.component"
      @status-changed="handleStatusChange($event)"
    ></component>
  </div>
</transition-group>

And this is my CSS:

.component-wrapper {
  width: 100%;

  .steps-viewport {
    height: calc(100vh - 10rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .step-wrapper {
      flex: 0 0 calc(100vh - 10rem);
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
  }
}

Last but not least, the script of my component:

import ProductInfo from "./ProductInfo";

export default {
  components: {
    ProductInfo
  },

  props: {
    defaultActiveStep: {
      type: Number,
      default: 1
    }
  },

  watch: {
    activeStep() {
      this.$emit("step-changed", this.activeStep);
    }
  },

  computed: {
    currentStep() {
      return this.steps.filter(s => s.order === this.activeStep);
    }
  },

  data: () => {
    return {
      activeStep: 1,
      steps: [
        {
          order: 1,
          title: "Title 1?",
          headline:
            "Headline 1",
          component: "product-info"
        },
        {
          order: 2,
          title: "Title 2",
          headline:
            "Headline 2.",
          component: "product-info"
        },
        {
          order: 3,
          title: "Title 3",
          headline:
            "Headline 3.",
          component: "product-info"
        },
        {
          order: 4,
          title: "Title 4!",
          headline:
            "Headline 4",
          component: "product-info"
        }
      ]
    };
  },

  methods: {
    handleStatusChange(status) {
      
      const first = this.steps.shift();
      this.steps = this.steps.concat(first);
    }
  }
};
Daniel_Knights
  • 7,940
  • 4
  • 21
  • 49
Luis Filipe
  • 25
  • 1
  • 5

1 Answers1

2

You need to define special classes to target different stages of the transition, in this case .steps-enter-active (mid-transition state) and .steps-enter-to (end-state).

For it to occur on page-load, you also need to pass the appear attribute.

If you want the entire order block to transition you can do so like this:

new Vue({
  el: '#app',

  computed: {
    currentStep() {
      return this.steps.filter(s => s.order === this.activeStep);
    }
  },

  data: () => {
    return {
      activeStep: 1,
      steps: [{
          order: 1,
          title: "Title 1?",
          headline: "Headline 1",
          component: "product-info"
        },
        {
          order: 2,
          title: "Title 2",
          headline: "Headline 2.",
          component: "product-info"
        },
        {
          order: 3,
          title: "Title 3",
          headline: "Headline 3.",
          component: "product-info"
        },
        {
          order: 4,
          title: "Title 4!",
          headline: "Headline 4",
          component: "product-info"
        }
      ]
    };
  },
});

Vue.config.productionTip = false;
Vue.config.devtools = false;
.component-wrapper {
  width: 100%;
}

.steps-viewport {
  height: calc(100vh - 10rem);
  /* overflow: hidden */
  display: flex;
  flex-direction: column;
}

.step-wrapper {
  flex: 0 0 calc(100vh - 10rem);
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.steps-enter-active {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.4s;
}

.steps-enter-to {
  opacity: 1;
  transform: translateY(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <transition-group class="steps-viewport" name="steps" tag="div" appear>
    <div v-for="step in currentStep" :key="step.order" class="step-wrapper">
      <h3 class="is-size-5 mb-6 has-text-grey-light">
        Passo {{ step.order }}
      </h3>
      <h1 class="is-size-3">{{ step.title }}</h1>
      <h2 class="is-size-4 mt-2 has-text-grey">{{ step.headline }}</h2>
    </div>
  </transition-group>
</div>

If you want each element within to transition, you can do so like this, adding a transition-delay:

new Vue({
  el: '#app',

  computed: {
    currentStep() {
      return this.steps.filter(s => s.order === this.activeStep);
    }
  },

  data: () => {
    return {
      activeStep: 1,
      steps: [{
          order: 1,
          title: "Title 1?",
          headline: "Headline 1",
          component: "product-info"
        },
        {
          order: 2,
          title: "Title 2",
          headline: "Headline 2.",
          component: "product-info"
        },
        {
          order: 3,
          title: "Title 3",
          headline: "Headline 3.",
          component: "product-info"
        },
        {
          order: 4,
          title: "Title 4!",
          headline: "Headline 4",
          component: "product-info"
        }
      ]
    };
  },
});

Vue.config.productionTip = false;
Vue.config.devtools = false;
.component-wrapper {
  width: 100%;
}

.steps-viewport {
  height: calc(100vh - 10rem);
  /* overflow: hidden */
  display: flex;
  flex-direction: column;
}

.step-wrapper {
  flex: 0 0 calc(100vh - 10rem);
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.steps-enter-active {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.4s;
}

.steps-enter-to {
  opacity: 1;
  transform: translateY(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="step in currentStep" :key="step.order" class="step-wrapper">
    <transition-group class="steps-viewport" name="steps" tag="div" appear>
      <h3 class="is-size-5 mb-6 has-text-grey-light" key="1">
        Passo {{ step.order }}
      </h3>
      <h1 class="is-size-3" style="transition-delay: 0.1s" key="2">{{ step.title }}</h1>
      <h2 class="is-size-4 mt-2 has-text-grey" style="transition-delay: 0.2s" key="3">{{ step.headline }}</h2>
    </transition-group>
  </div>
</div>

To also transition out, you'll need to use transition instead so you can use mode="out-in" which allows the element to transition out first, before the next one enters.

You'll also need to target the children of the transitioning element in your CSS with .steps-enter-active > *. Then, just add a .steps-leave-to class which defines the state to leave to:

new Vue({
  el: '#app',

  computed: {
    currentStep() {
      return this.steps.filter(s => s.order === this.activeStep);
    }
  },

  methods: {
    nextStep() {
      if (this.activeStep !== this.steps.length) {
        this.activeStep++;
      } else {
        this.activeStep = 1;
      }
    }
  },

  data: () => {
    return {
      activeStep: 1,
      steps: [{
          order: 1,
          title: "Title 1?",
          headline: "Headline 1",
          component: "product-info"
        },
        {
          order: 2,
          title: "Title 2",
          headline: "Headline 2.",
          component: "product-info"
        },
        {
          order: 3,
          title: "Title 3",
          headline: "Headline 3.",
          component: "product-info"
        },
        {
          order: 4,
          title: "Title 4!",
          headline: "Headline 4",
          component: "product-info"
        }
      ]
    };
  },
});

Vue.config.productionTip = false;
Vue.config.devtools = false;
.component-wrapper {
  width: 100%;
}

.steps-viewport {
  height: calc(100vh - 10rem);
  /* overflow: hidden */
  display: flex;
  flex-direction: column;
}

.step-wrapper {
  flex: 0 0 calc(100vh - 10rem);
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.step-wrapper,
.step-wrapper>* {
  transition: all 0.4s;
}

.step-wrapper>h1 {
  transition-delay: 0.1s;
}

.step-wrapper>h2 {
  transition-delay: 0.2s;
}

.steps-enter-active>* {
  opacity: 0;
  transform: translateY(100%);
}

.steps-leave-to>* {
  opacity: 0;
  transform: translateY(-100%);
}

.steps-enter-to>* {
  opacity: 1;
  transform: translateY(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <transition name="steps" mode="out-in" duration="600" appear>
    <div v-for="step in currentStep" :key="step.order" class="step-wrapper">
      <h3 class="is-size-5 mb-6 has-text-grey-light">
        Passo {{ step.order }}
      </h3>
      <h1 class="is-size-3">{{ step.title }}</h1>
      <h2 class="is-size-4 mt-2 has-text-grey">{{ step.headline }}</h2>
    </div>
  </transition>
  <button @click="nextStep()">Next</button>
</div>

Lastly, to have everything shift up smoothly once a new element is added, you can wrap the initial fields inside a div, wrap the new element in a transition and reduce the height of the first div by the height of the new element.

You'll also need to transition the height and configure the timings (transition-delay and duration attribute) to match up correctly:

new Vue({
  el: '#app',

  computed: {
    currentStep() {
      return this.steps.filter(s => s.order === this.activeStep);
    }
  },

  methods: {
    nextStep() {
      this.$refs.addStep.disabled = false;
      this.extraStep = false;
      this.$refs.addAnotherStep.disabled = false;
      this.anotherExtraStep = false;

      if (this.activeStep !== this.steps.length) {
        this.activeStep++;
      } else {
        this.activeStep = 1;
      }
    },
    addStep() {
      const initial = document.querySelector('.step-initial');
      const input = document.querySelector('.step-input');

      // 52px = input height + margin + border
      initial.style.maxHeight = initial.offsetHeight - 52 + 'px';

      if (!this.extraStep) {
        this.$refs.addStep.disabled = true;
        this.extraStep = true;
      } else {
        this.$refs.addAnotherStep.disabled = true;
        this.anotherExtraStep = true;
      }
    }
  },

  data: () => {
    return {
      extraStep: false,
      anotherExtraStep: false,
      activeStep: 1,
      steps: [{
          order: 1,
          title: "Title 1?",
          headline: "Headline 1",
          component: "product-info"
        },
        {
          order: 2,
          title: "Title 2",
          headline: "Headline 2.",
          component: "product-info"
        },
        {
          order: 3,
          title: "Title 3",
          headline: "Headline 3.",
          component: "product-info"
        },
        {
          order: 4,
          title: "Title 4!",
          headline: "Headline 4",
          component: "product-info"
        }
      ]
    };
  },
});

Vue.config.productionTip = false;
Vue.config.devtools = false;
#app {
  position: relative;
  height: calc(300px + 52px);
}

.component-wrapper {
  width: 100%;
}

.steps-viewport {
  /* height: calc(100vh - 10rem); */
  /* overflow: hidden */
  display: flex;
  flex-direction: column;
}

.step-wrapper,
.step-wrapper * {
  transition: all 0.2s;
}

.step-wrapper * {
  margin: 0;
}

.step-initial {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  height: 300px;
  max-height: 300px;
}

.step-initial *:nth-child(2) {
  transition-delay: 0.05s;
}

.step-initial *:nth-child(3) {
  transition-delay: 0.1s;
}

.steps-enter-active .step-initial * {
  opacity: 0;
  transform: translateY(100%);
}

.steps-leave-to .step-initial *,
.steps-leave-to .step-input {
  opacity: 0;
  transform: translateY(-100%);
}

.steps-leave-to .step-input:nth-of-type(2) {
  transition-delay: 0.2s;
}

.steps-leave-to .step-input:nth-of-type(3) {
  transition-delay: 0.3s;
}

.steps-enter-to .step-initial * {
  opacity: 1;
  transform: translateY(0);
}

.step-input {
  margin: 20px 0;
  height: 30px;
}

.steps-input-enter-active {
  opacity: 0;
  transform: translateY(100%);
}

.steps-input-leave-to {
  opacity: 0;
  transform: translateY(-100%);
}

.steps-input-enter-to {
  opacity: 1;
  transform: translateY(0);
}

.step-btns {
  position: absolute;
  bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <transition name="steps" mode="out-in" duration="350" appear>
    <div v-for="step in currentStep" :key="step.order" class="step-wrapper">
      <div class="step-initial">
        <h3 class="is-size-5 mb-6 has-text-grey-light">
          Passo {{ step.order }}
        </h3>
        <h1 class="is-size-3">{{ step.title }}</h1>
        <h2 class="is-size-4 mt-2 has-text-grey">{{ step.headline }}</h2>
      </div>
      <transition name="steps-input">
        <div v-if="extraStep" class="step-input">
          <input />
        </div>
      </transition>
      <transition name="steps-input">
        <div v-if="anotherExtraStep" class="step-input">
          <input />
        </div>
      </transition>
    </div>
  </transition>
  <div class="step-btns">
    <button @click="nextStep()">Next</button>
    <button @click="addStep()" ref="addStep">Add Step</button>
    <button @click="addStep()" ref="addAnotherStep">Add Another Step</button>
  </div>
</div>
Daniel_Knights
  • 7,940
  • 4
  • 21
  • 49
  • I think we are almost there, I just couldn't understand why there is this "2 step" animation on the end of the transition ... Take a look at the result and pay attention to the button at the bottom of the step content ... thank you so much once more: https://stoic-lamarr-4c07b9.netlify.app/Untitled%20Project.gif – Luis Filipe Dec 05 '20 at 03:01
  • 1
    Oh, it's because the transition-delay of the headings makes it longer than the duration of the transition. If you set the duration it fixes it, see my edit – Daniel_Knights Dec 05 '20 at 13:11
  • Thanks Daniel, I will give it a try! Something that I think it is impossible to do though is the “smooth slide up” whenever a new item is added inside the step, if you take a look at the image, on the third step, when the user provides an answer for the first question, a new question is added and the whole content smoothly moves up.... using your example I was able to add a new element, but I couldn’t keep the animation ... just saying because maybe there is a way, but you have been super helpful already! – Luis Filipe Dec 06 '20 at 03:17
  • Maybe if I have the to slide up the step container and the to slide up (move) the step content dynamically whenever a new component is added to the step content it would work, however I don’t know if this: h1,h2, [dynamically added component] is allowed though – Luis Filipe Dec 06 '20 at 03:37
  • 1
    No problem, Luis. That complicates things quite a bit, so, bear-in-mind, there are many ways you could go about this depending on your use case. I've added another example snippet demonstrating **one way** it could be done. – Daniel_Knights Dec 06 '20 at 14:44
  • 1
    Thank you so much Daniel, I really appreciate your help! I will first try to understand what you did and give it a try. I imagined that it could be trickier and I noticed that there is some DOM manipulation on your sample, so maybe that was the piece I was missing... thank you again – Luis Filipe Dec 06 '20 at 19:34