Hello, world!

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!

Murez Nasution

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

Requirement

1. Install NodeJS

2. Install vue-cli
   Type: npm install -g vue-cli, then hit Enter.
   

3. Create new webpack project
   Type: vue init webpack Murez, then hit Enter.
   

4. Install text editor (Sublime, or any others)

5. Your passion and free time

Implementation

After all needs are met, here is a general steps that we will do.

Overview

We will try to create a simple page consisting of two buttons,

• Generate/Add - to insert new card, and
• Shuffle - to shuffle all existing cards,
  and several Cards, which will be inserted transitions into each of them. A card is a container of an image and an its index in below.

---

Here is the general steps:

1. Create a New Component
2. Edit Router
3. Create Template
4. Apply Transition on Click Event of Generate Button
5. Create Add Button
6. Create Shuffle Button
7. Apply Transition on Shuffling Cards
8. Apply Transition on Switch of Buttons

---

1. Create a New Component

Create Main.vue file in relative directory: src/components/branch/tutorial/ as seen below,

2. Edit Router

Change src/router/index.js so that it looks like the following,

3. Create Template

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>

---

4. Apply Transition on Click Event of Generate Button

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.

5. Create Add Button

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

6. Create Shuffle Button

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,

7. Apply Transition on Shuffling Cards

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;
}

8. Apply Transition on Switch of Buttons

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,

Thank you!

Share with Heart

---

Posted on Utopian.io - Rewarding Open Source Contributors

---