Skip to content

Instantly share code, notes, and snippets.

@mikob
Created October 4, 2018 14:35
Show Gist options
  • Save mikob/b1cf051fd3cd4d63a5c759083b9c9093 to your computer and use it in GitHub Desktop.
Save mikob/b1cf051fd3cd4d63a5c759083b9c9093 to your computer and use it in GitHub Desktop.
Flippy text
<template>
<span class="item-cont">
<transition-group name="rolodex">
<span v-for="(item, index) of items" :key="index" v-show="index === i % items.length">{{ item }}</span>
</transition-group>
</span>
</template>
<style scoped>
.item-cont span {
position: relative;
border-bottom: 1px solid var(--light-text-color);
}
.item-cont span span {
left: 0;
perspective: 1000px;
position: absolute;
display: inline-block;
white-space: nowrap;
transform-style: preserve-3d;
background: white;
}
.rolodex-enter-active {
animation: flip-horizontal-top 0.2s ease-in both;
}
.rolodex-leave-active {
animation: flip-horizontal-bottom 0.2s ease-out both;
}
@keyframes flip-horizontal-top {
0% {
transform: rotateX(-90deg) translateZ(-30px);
opacity: 0;
}
100% {
transform: rotateX(0deg) translateZ(0px);
opacity: 1;
}
}
@keyframes flip-horizontal-bottom {
0% {
transform: rotateX(0deg) translateZ(0px);
opacity: 1;
}
100% {
transform: rotateX(90deg) translateZ(-30px);
opacity: 0;
}
}
</style>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class FlipText extends Vue {
@Prop({default: 2500})
speed!: number;
@Prop()
items!: string[];
i: number = 0;
mounted() {
setInterval(() => {
this.i += 1;
}, this.speed);
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment