Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/vue-slow-reveal.js.html

Last active June 13, 2019 21:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/6b5ccc5573061afaa5dfb90bad2391fe to your computer and use it in GitHub Desktop.
Save nfreear/6b5ccc5573061afaa5dfb90bad2391fe to your computer and use it in GitHub Desktop.
Download ZIP
slow-reveal — Vue.js: Gradually reveal a list of items ;).
Raw
vue-slow-reveal.js.html
<!doctype html> <title> slow-reveal — Vue.js </title>
<link rel=stylesheet href="https://unpkg.com/vue-oneline@1.2.0/demo/demo.css">
<style>
.slow-reveal-start {
opacity: 0;
}
.slow-reveal-end {
box-shadow: 1px 2px 3px 3px rgba(255, 165, 0, 0.8); /* orange */
}
.X-slow-reveal-end,
.slow-reveal-after {
opacity: 1;
transition: all 1s;
}
</style>
<div id="app" class="ol-demo">
<h1> slow-reveal — Vue.js </h1>
<ol>
<li
v-for="(item, index) of reverseItems"
:key="item.id"
>
<slow-reveal
class="border"
:index="index + 1"
:delay-ms="1000"
:delay-after="1200"
@reveal-end="oldebug('End', $event)">
Item {{ item.id + 1 }}
</slow-reveal>
</li>
</ol>
</div>
<script src="https://unpkg.com/vue-oneline"></script>
<script src="https://unpkg.com/soundcloud-audio@1.4.0/dist/soundcloud-audio.min.js"></script>
<script id="SlowReveal.vue">
OneLine({ itemCount: 8 }).then(done => {
Vue.component('SlowReveal', {
template: '<div :class="className"> <slot /> </div>',
props: {
index: {
type: Number,
required: true,
},
delayMs: {
type: Number,
default: 400,
},
delayAfter: {
type: Number,
default: 600,
}
},
data () { return {
className: 'slow-reveal-start'
}},
methods: {
wait (delayMs) {
return new Promise((resolve, reject) => window.setTimeout(resolve, delayMs));
},
},
mounted () {
this
.wait(this.index * this.delayMs)
.then(() => {
this.className = 'slow-reveal-end';
this.$emit('reveal-end', { index: this.index })
return this.wait(this.delayAfter)
})
.then(() => {
this.className = 'slow-reveal-after';
this.$emit('reveal-after', { index: this.index })
})
console.warn('SlowReveal:', this.index, this.delayMs, this)
}
})
done() // Important: call 'done()' at the end of your custom Vue.js code!!
})
</script>
<pre>
© Nick Freear, 12-June-2019.
* Gist: https://gist.github.com/nfreear/6b5ccc5573061afaa5dfb90bad2391fe
* Using: https://npmjs.com/package/vue-oneline
</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment