timeline.vue

<template>
  <v-app>
    <v-container>
      <v-layout align-center>
        <span class="display-2">Framework Timeline</span>
        <v-spacer></v-spacer>
        <v-btn
          color="primary"
          @click="play"
        >
          Start
          <v-icon right>mdi-play-circle</v-icon>
        </v-btn>
        <v-btn
          icon
          @click="stop"
        >
          <v-icon>mdi-stop</v-icon>
        </v-btn>
      </v-layout>
      <v-divider class="my-3"></v-divider>
      <v-scale-transition
        group
        tag="v-timeline"
      >
        <v-timeline-item
          v-if="index == null || index >= i"
          v-for="(item, i) in items"
          :key="i"
          :icon="item.icon"
          :color="item.color"
        >
          <strong
            :class="index === i ? 'primary--text' : undefined"
            slot="opposite"
            v-text="item.caption"
          />

          <v-hover
            v-model="item.value"
            open-delay="100"
            close-delay="200"
          >
            <v-card>
              <v-card-title>
                <span
                  class="title font-weight-light"
                  v-text="item.title"
                />
                <v-spacer></v-spacer>
              </v-card-title>
              <v-expand-transition>
                <div v-if="(index != null && index >= i) || item.value">
                  <v-card-text v-text="item.text" />
                </div>
              </v-expand-transition>
            </v-card>
          </v-hover>
        </v-timeline-item>
      </v-scale-transition>
    </v-container>
  </v-app>
</template>

<script>
  const release = {
    icon: 'mdi-package-variant-closed',
    color: 'brown'
  }

  export default {
    data: () => ({
      index: null,
      interval: null,
      items: [
        {
          ...release,
          title: 'Official release',
          caption: 'December 2016',
          text: 'Vuetify is officially released. The framework initially shipped with 40 components and came in at a whopping 46kb.',
          value: false
        },
        {
          title: 'Community opens',
          caption: 'January 2017',
          icon: 'mdi-account-multiple',
          color: 'purple',
          text: 'The first community was in the chat application gitter. It provided a place for developers to receive support in developing applications with Vuetify.',
          value: false
        },
        {
          title: 'Documentation rewrite',
          caption: 'May 2017',
          icon: 'mdi-book-open-variant',
          color: 'indigo',
          text: 'The documentation was rewritten from the ground up to provide localization support, more examples and an overaul improved browsing experience.',
          value: false
        },
        {
          title: 'A-la-carte',
          caption: 'September 2017',
          icon: 'mdi-widgets',
          color: 'teal',
          text: 'Thanks to the pioneering efforts of nekosaur, the ability to only include the components you want was added.',
          value: false
        },
        {
          title: 'Dynamic themes',
          caption: 'October 2017',
          icon: 'mdi-palette',
          color: 'pink',
          text: 'Lead by jacek, the entire theme system was rewritten to provide more flexibility.',
          value: false
        },
        {
          ...release,
          title: 'v1.0 Release',
          caption: 'February 2017',
          text: 'The officialy v1.0 release party. After 8 months, 27 betas, 32 alphas and kaels sanity, Vuetify was pushed into production',
          value: false
        }
      ],
      intervalTime: 2500
    }),

    methods: {
      iterate () {
        if (this.index === this.items.length - 1) {
          this.stop()
        } else {
          this.index++
        }
      },
      play () {
        this.index = 0

        this.interval = setInterval(this.iterate, this.intervalTime)
      },
      stop () {
        clearInterval(this.interval)
        this.interval = null
        this.index = null
      }
    }
  }
</script>