How to make elements appear and disappear with animation in a vue component?

Issue

I'm using quasar vue.js framework and have this component:

<template>
  <div class="landing-section">
    <div class="landing-section__text-box">
      <p class="landing-section__text-box__title">Albert Pike</p>
      <p class="landing-section__text-box__description">
        Albert Pike (December 29, 1809 – April 2, 1891) was an American author,
        poet, orator, editor, lawyer, jurist, and prominent member of the
        Freemasons. Pike was a senior officer of the Confederate States Army who
        commanded the District of Indian Territory in the Trans-Mississippi
        Theater of the American Civil War.
      </p>
      <q-btn
        class="q-mt-md"
        :to="{ name: 'AboutUs' }"
        padding="0.8rem 2.5rem"
        outline
        rounded
        color="white"
        label="Know More"
      />
    </div>
  </div>
</template>

<style scoped>
.landing-section {
  width: 100%;
  height: 37rem;
  background: url("https://getwallpapers.com/wallpaper/full/9/a/6/163230.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 20% -1.2rem;
  display: flex;
  align-items: center;
}
.landing-section__text-box {
  width: 33rem;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 5rem;
}
.landing-section__text-box__title {
  color: white;
  font-size: 2rem;
  font-weight: 700;
}
.landing-section__text-box__description {
  color: white;
  font-size: 1rem;
  font-weight: 500;
}
.landing-section__text-box__learn-more-button {
  color: white;
  font-size: 1rem;
}
::v-deep(.block) {
  font-weight: 700;
}
</style>

This is the final result:

Now i want to add animation to the following elements: landing-section__text-box__title landing-section__text-box__description q-btn

1. The 3 elements should change for example every 3 seconds to display new content especially the title and the description.
2. This change should loop infinitely.

Any help on how can i do this ?

Solution

Transitioning Between Elements

const vm = new Vue({
  el: '#app',
  data() {
    return {
      sections: [{
          title: "Section A",
          description: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
        },
        {
          title: "Section B",
          description: "bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"
        }
      ],
      activeSectionIndex: 0,
    }
  },
  computed: {
    activeSection() {
      return this.sections[this.activeSectionIndex]
    }
  },
  methods: {
    nextSection() {
      this.activeSectionIndex++
      if(this.activeSectionIndex >= this.sections.length) this.activeSectionIndex = 0
    }
  },
  mounted() {
    this.timer = setInterval(() => this.nextSection(), 3000)
  },
  destroyed() {
    clearInterval(this.timer)
  }  
})

.slide-fade-enter-active {
  transition: all .8s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<div id="app">
  <transition name="slide-fade" mode="out-in">
    <div :key="activeSection.title">
      <p> {{ activeSection.title }} </p>
      <p> {{ activeSection.description }} </p>
    </div>
  </transition>
</div>

Answered By - Michal Levý