Animated Text Vue Component

animated-text.md

Add the Animate CSS library to your project (https://daneden.github.io/animate.css/)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

Code

Vue.component('animated-text', {
    props: {
        text: {
            type: String,
            default: 'Animated Text',
        },
        animation: {
            type: String,
            default: 'zoom',
        },
    },
    mounted() {
        this.$el.addEventListener('animationend', this.handleAnimationEnd);
    },
    beforeDestroy() {
        this.$el.removeEventListener('animationend', this.handleAnimationEnd);
    },
    data() {
        return {
            content: this.text,
            newContent: null,
            customAnimation: {},
            defaults: {
                flash: { hide: 'flash', show: 'flash' },
                fade: { hide: 'fadeOut', show: 'fadeIn' },
                zoom: { hide: 'zoomOut', show: 'zoomIn' },
                bounce: { hide: 'bounceOutRight', show: 'bounceInLeft' },
                hinge_zoom: { hide: 'hinge', show: 'zoomIn' },
                fade_jack: { hide: 'fadeOut', show: 'jackInTheBox' },
            },
        };
    },
    computed: {
        hideAnimation() {
            return this.customAnimation.hide || this.defaults[this.animation].hide;
        },
        showAnimation() {
            return this.customAnimation.show || this.defaults[this.animation].show;
        },
    },
    methods: {
        animate(hide, show) {
            this.setCustomAnimation(hide, show);

            this.$el.classList.add('animated', this.hideAnimation);
        },
        animateContent(newContent, hide, show) {
            this.setNewContent(newContent);

            this.animate(hide, show);
        },
        setCustomAnimation(hide, show) {
            this.customAnimation = { hide, show };
        },
        setNewContent(newContent) {
            this.newContent = newContent;
        },
        setContent(content) {
            this.content = content;
        },
        handleAnimationEnd(event) {
            if (event.animationName == this.hideAnimation) {
                this.$el.classList.remove('animated', this.hideAnimation);
                this.$el.classList.add('animated', this.showAnimation);

                if (this.newContent) {
                    this.content = this.newContent;
                    this.newContent = null;
                }
            }

            if (event.animationName == this.showAnimation) {
                this.$el.classList.remove('animated', this.showAnimation);
                this.newContent = null;
                this.customAnimation = {};
            }
        },
    },
    template: '<span class="animated-text" style="display: inline-block;">{{content}}</span>',
});

Usage

Adding the markup

You can use any of the pre defined animations (Or extend it):

• flash
• fade
• zoom
• bounce
• hinge_zoom
• fade_jack

<animated-text ref="animatedText" animation="fade" text="Hello"></animated-text>

Animating

You can use any of the Animate CSS library class

this.$refs.animatedText.animate();                                    // Uses default animation with default content 
this.$refs.animatedText.animateContent('Word!');                      // Uses default animation and set a new content
this.$refs.animatedText.animateContent('Word!', null, 'zoomIn');      // Overwriting default "show" animation
this.$refs.animatedText.animateContent('Word!', 'zoomOut', null);     // Overwriting default "hide" animation
this.$refs.animatedText.animateContent('Word!', 'zoomOut', 'zoomIn'); // Overwriting default "show" and "hide" animation

Customizing style

.animated-text { color: #fff; background-color: blue; }