willaengine/resources/js/Authentication/App.vue

<template>
    <v-app>
        <div id="app">

            <!-- <Loader></Loader> -->
            <!-- <Header></Header> -->
            <background></background>
            <v-container mt-5 p-5 fluid class="Login">
                <h2 class="Title"> WILLA ENGINE </h2>
                <transition name="Fade" mode="out-in" >
                    <v-layout v-if="State === 'Login'" key="Login" column justify-center fill-height class="LoginContainer" ref="LoginContainer" >
                        <v-flex xs12>
                            <WM-PartTitle class="WM-Margin-T-20" TitleFa=" ورود " TitleEn=" Login " TextFaColor="white--text" TextColor="black--text" Color="white"></WM-PartTitle>
                            <v-flex mt-3>
                                <v-text-field dark label=" شماره ی همراه خود را وارد کنید " hint="حداکثر 50 کاراکتر " color="white" prepend-icon="fas fa-phone"></v-text-field>
                            </v-flex>
                            <v-flex>
                                <v-text-field dark type="password" label=" کلمه ی عبور " color="white" prepend-icon="fas fa-asterisk"></v-text-field>
                            </v-flex>
                            <v-flex>
                                <v-btn outline fab color="white" @click="State = 'Register'">
                                    <v-icon>fas fa-plus</v-icon>
                                </v-btn>
                                <a href="/Main/Home">
                                    <v-btn outline fab color="white" >
                                        <v-icon>fas fa-chevron-left</v-icon>
                                    </v-btn>
                                </a>
                            </v-flex>
                        </v-flex>
                    </v-layout>
                    <v-layout v-if="State === 'Register'" key="Register" column justify-center fill-height class="RegisterContainer" ref="RegisterContainer" >
                        <WM-PartTitle class="WM-Margin-T-20" TitleFa=" ثبت نام " TitleEn=" Sign Up " TextFaColor="white--text" TextColor="black--text" Color="white"></WM-PartTitle>
                        <v-flex mt-3>
                            <v-text-field dark label=" نام و نام خانوادگی " hint="حداکثر 50 کاراکتر " color="white" prepend-icon="fas fa-user"></v-text-field>
                        </v-flex>
                        <v-flex>
                            <v-text-field dark label=" شماره ی همراه خود را وارد کنید " hint="حداکثر 50 کاراکتر " color="white" prepend-icon="fas fa-phone"></v-text-field>
                        </v-flex>
                        <v-flex>
                            <v-text-field dark type="password" label=" کلمه ی عبور " color="white" prepend-icon="fas fa-asterisk"></v-text-field>
                        </v-flex>
                        <v-flex>
                            <v-btn outline fab color="white" @click="State = 'Login'">
                                <v-icon>fas fa-plus</v-icon>
                            </v-btn>
                            <a href="/Main/Home">
                                <v-btn outline fab color="white"  >
                                    <v-icon>fas fa-chevron-left</v-icon>
                                </v-btn>
                            </a>
                        </v-flex>
                    </v-layout>
                </transition>

            </v-container>


        </div>
    </v-app>
</template>

<script>
import Background from '@JS/Authentication/components/Background';
import Tile from '@JS/Authentication/components/Tile';
import Loader from '@JS/Authentication/components/Loader';
import Header from '@JS/Authentication/components/Header';
export default {
    data() {
        return {
            loading: true,
            isShifted: false,
            loadingVisible: false,
            RegisterStatus: false,
            LoginStatus: false,
            State: 'Login'
        };
    },

    components: {
        Header: Header,
        background: Background,
        Tile: Tile,
        Loader: Loader,
    },
    methods: {
        Register: function() {
            // console.log(this.$refs.RegisterContainer)
            this.RegisterStatus = !this.RegisterStatus;
            this.LoginStatus = !this.LoginStatus;
        },
        Log(value) {
            this.$store.commit('Log',value);
        }
    },
    beforeMount() {
        var self = this;
        setTimeout(function() {
                self.loading = ! self.loading;
            }, 2000)
    }
};
</script>

<style lang="scss">

    .Title {
        letter-spacing: 15px;
        font-size: 18px;
        text-align: center;
        color: #fff;

    }
    .Login {
        // animation: FadeInUp 1s;
        // transition: all 600ms cubic-bezier(.17,.67,1,.01);

    }
    .LoginContainer, .RegisterContainer {
        margin-top: 150px !important;
        width:600px;
        margin:0 auto;
    }



    .Blur-enter-active, .Blur2-leave-active {
        animation: BlurIn 0.5s;
        animation-fill-mode: both;
    }
    .Blur-enter, .Blur2-leave-to /* .fade-leave-active below version 2.1.8 */ {
        animation: BlurOut 0.5s;
        animation-fill-mode: both;
    }


    .FadeUp-enter-active, .FadeUp-leave-active {
        animation: FadeInUp 500ms;
    }
    .FadeUp-enter, .FadeUp-leave-to /* .fade-leave-active below version 2.1.8 */ {
        animation: FadeOutUp 200ms;
    }


    .Fade-enter-active, .Fade-leave-active {
        animation: FadeIn 500ms;
    }
    .Fade-enter, .Fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        animation: FadeOut 500ms;
    }


    @keyframes FadeIn {
        0% {
            opacity: 0;
            display:none;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes FadeOut {
        0% {
            opacity: 1;
        }
        100% {
            display:none;
            opacity: 0;
        }
    }


    @keyframes FadeInUp {
        0% {
            display:none;
            opacity: 0;
            transform: translateY(300px);
        }
        100% {
            opacity: 1;
            transform: translateY(0px);
        }
    }
    @keyframes FadeOutUp {
        0% {
            opacity: 1;
            transform: translateY(0px);
        }
        100% {
            opacity: 0;
            transform: translateY(-300px);
            display:none;
        }
    }


    @keyframes BlurIn {
        0% {
            opacity: 0;
            filter: blur(40px);
            -webkit-filter: blur(40px);
            transform: translateY(50px) scale(3);
            -webkit-transform: translateY(50px) scale(3);
        }
        100% {
            opacity: 1;
            filter: blur(0px);
            -webkit-filter: blur(0px);
            transform: translateY(0px) scale(1);
            -webkit-transform: translateY(0px) scale(1);
        }
    }
    @keyframes BlurOut {
        0% {
            opacity: 1;
            filter: blur(0px);
            -webkit-filter: blur(0px);
            transform: translateY(0px) scale(1);
            -webkit-transform: translateY(0px) scale(1);
        }
        100% {
            opacity: 0;
            filter: blur(40px);
            -webkit-filter: blur(40px);
            transform: translateY(0px) scale(0.4);
            -webkit-transform: translateY(0px) scale(0.4);
        }
    }


</style>