VueJS is still one of the most popular JavaScript frameworks and widely sponsored by other well-known and famous platforms. In this article, I will clearly guide you how to build some interactive user-interface with transition using VueJS. Slightly different about how we can apply transitions to the component compared to conventional ways. But, certainly not difficult to practice.
OK. Here we go!
All the articles I've created are dedicated to all of open source consumers and especially Utopian-IO as the platform of contributions.
Courtesy and Special Thank to VueJS
Captured from: https://raw.githubusercontent.com/vuejs/vue/dev/README.md
Install NodeJS
Install vue-cli
Type: npm install -g vue-cli, then hit Enter.
Create new webpack project
Type: vue init webpack Murez, then hit Enter.
Install text editor (Sublime, or any others)
Your passion and free time
After all needs are met, here is a general steps that we will do.
We will try to create a simple page consisting of two buttons,
Here is the general steps:
Create Main.vue file in relative directory: src/components/branch/tutorial/ as seen below,
Change src/router/index.js so that it looks like the following,
Add the following code,
<template>
<div id="demo">
<button class="myBtn" @click="action">Generate</button>
<div style="position:relative;top:100px">
<div v-for="i in numbers" :key="i" class="item-pict">
<img src="../../../assets/avatar.png" />
<p>{{ i }}</p>
</div>
</div>
</div>
</template>
<style scoped>
#demo { position: relative; }
#demo .myBtn {
position: absolute;
width: 25%;
padding: 15px 5%;
border: 0;
outline: none;
cursor:pointer;
border-radius: 4px;
font-size: 25px;
font-family: Verdana;
transition: all .3s ease;
}
#demo .right-side {
left: 230px;
}
#demo .myBtn:active {
background-color: dimgray;
color: #fff;
}
.item-pict {
width: 100px;
display: inline-block;
margin: 15px 10px;
border-radius: 5px;
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.3),0 6px 20px 0 rgba(0, 0, 0, 0.2);
}
.item-pict > img {
width: 100%;
border-radius: 5px 5px 0 0;
}
.item-pict > p {
margin: 5px 0;
font-size: 35px;
text-align: center;
}
</style>
<script>
import _ from 'lodash';
export default {
data:() => ({
state:0
,numbers:[ ]
,n:0
}),
methods: {
rnd(array) { return Math.floor(Math.random() * (array.length)) },
action() {
if(this.state == 0) {
let i = -1;
for(; ++i < 10; this.numbers.push(i));
this.n = i;
this.state = 1;
}
}
}
}
</script>
Add the following code to the <style> tag,
.gallery-enter-active, .gallery-leave-active {
transition: all 1s;
}
.gallery-enter, .gallery-leave-to {
opacity: 0;
transform: translateY(100px);
}
And edit the <div> element to be as follows,
<transition-group name="gallery" tag="div" style="position:relative;top:100px">
. . .
</transition-group>
Open your browser and access to localhost:8080.
My apology for not including a live demo of this section. But, the results should already be present for you as your progress following this article.
Modify the <button> tag to be as follows,
<button class="myBtn" @click="action" :key="state">{{ getLabel }}</button>
And again, action method to be as follows,
if(this.state == 0) {
. . .
} else {
this.numbers.splice(this.rnd(this.numbers), 0, ++this.n)
}
Finally, add computed of getLabel,
computed: {
getLabel() {
switch(this.state) {
case 0: return "Generate";
case 1: return "Add";
default: return "...";
}
}
}
Again, focus on your browser, then reload. How cool. :-D
Add another button to be as follows,
<button class="myBtn right-side" @click="shuffle">Shuffle</button>
And another method of shuffle.
shuffle() { this.numbers = _.shuffle(this.numbers) }
Don't forget to include lodash, because we don't want to spend a lot of time creating the shuffle (of array) algorithm,
Just, add v-move class on <style>. :-D
Because the <transition-group> has been named, i.e. gallery , then do as follows,
.gallery-move {
transition: transform .5s;
}
Finally, we will demonstrate the transition between the elements, in this context, they are Generate and Add buttons.
Completely just do this following,
Now you will see that buttons Generate and Add will slide to change position one against the other.
Now, we're done! And,
Share with Heart