Rainieren
1 year ago
15
0
Vue

Laravel - VueJS adding transitions to flash message

Posted 1 year ago by Rainieren

Hello, I've followed Jeffrey's tutorial on how to add flash messages and I was wondering how to add an effect to it, I've stumbled across this https://vuejs.org/v2/guide/transitions.html But how can I add it in the code he wrote in the forum series? I want to use the slide-fade effect How can I add it to the flash message? And for clarity: Here is the Flash.vue code:

<template>
    <div class="alert alert-success alert-style"  role="alert" v-show="show">
        <strong>Succesvol!</strong> {{ bericht_body }}
    </div>
</template>

<script>
    export default {

        props: ['bericht'],

        data() {
           return {
               bericht_body: '',
               show: false
           }
        },

        created() {
            if (this.bericht) {
                this.flash(this.bericht);
            }

            window.events.$on('flash', bericht => this.flash(bericht));
        },

        methods: {
            flash(bericht) {
                this.bericht_body = bericht;
                this.show = true;

                this.hide();
            },

            hide() {
                setTimeout(() => {
                    this.show = false;
                }, 3000);
            }
        }
    }
</script>


<style>
    .alert-style {
        position: fixed;
        right: 25px;
        bottom: 25px;
    }

    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }

</style>

Thanks in advance!

Please sign in or create an account to participate in this conversation.