Using AngularJS to create CSS animations with @keyframes inside a directive is an innovative way

Question

Using AngularJS to create CSS animations with @keyframes inside a directive is an innovative way

I'm facing a challenge with creating @keyframes animation CSS within an AngularJS directive function. The issue is that I need to use a variable from the scope to generate these keyframes, but I am unsure of how to retrieve it.

app.directive("myCSSDiv", function() {
    var css = "@keyframes myAnimation {";
    var nb_msg = ??? // In this line, I would like to access a variable like $scope.nb_msg but I am not sure how to do so
    if(nb_msg == 2) {
        css += "0%, 100% {left: 0px}";
        css += "30%, 60% {left: -100px}";
    } else if(nb_msg == 3) {
        css += "0%, 100% {left: 0px}";
        css += "15%, 50% {left: -100px}";
        css += "60%, 85% {left: -200px}";
    } else if(...) {
        ...
    }
    return {
        restrict: "E",
        template: css
    }
});

If you have any suggestions or solutions, I would greatly appreciate it! Thanks!

javascript css angularjs angularjs-directive css-animations

Answer 1

Answer №1

The directive's scope can be accessed in the linking function of the directive.
It is recommended to isolate the directive's scope and pass values as parameters rather than accessing the current scope directly.

To use a value in the template, you can access it through an attribute:

app.directive('myCssDiv', function () {
    function createAnimationCss(num_messages) {
        var css = '@keyframes myAnimation {';
        switch (num_messages) {
            case 2:
                css += "0%, 100% {left: 0px}";
                css += "30%, 60% {left: -100px}";
                break;
            case 3:
                css += "0%, 100% {left: 0px}";
                css += "15%, 50% {left: -100px}";
                css += "60%, 85% {left: -200px}";
                break;
            case ...:
                ...
                break;
        }
        return css;
    }

    return {
        restrict: 'E',
        template: function (tElem, tAttrs) {
            return createAnimationCss(parseInt(tAttrs.message));
        }
    }
});

Usage example:

<my-css-div message="{{num_messages}}"></my-css-div>

UPDATE:

If num_messages may change or be asynchronously initialized later on, use the linking function and $watch to monitor its changes:

app.directive('myCssDiv', function () {
    function createAnimationCss(num_messages) {...}

    return {
        restrict: 'E',
        scope: {
            message: '='
        },
        link: function myCssDivPostLink(scope, elem, attrs) {
            scope.$watch('message', function (newValue) {
                var num_messages = parseInt(newValue);   
                if (!isNaN(num_messages)) {
                    elem.html(createAnimationCss(num_messages));
                }
            });
        }
    }
});

Usage example:

<my-css-div message="num_messages"></my-css-div>

Answer 2

The directive's scope can be accessed in the linking function of the directive.
It is recommended to isolate the directive's scope and pass values as parameters rather than accessing the current scope directly.

To use a value in the template, you can access it through an attribute:

app.directive('myCssDiv', function () {
    function createAnimationCss(num_messages) {
        var css = '@keyframes myAnimation {';
        switch (num_messages) {
            case 2:
                css += "0%, 100% {left: 0px}";
                css += "30%, 60% {left: -100px}";
                break;
            case 3:
                css += "0%, 100% {left: 0px}";
                css += "15%, 50% {left: -100px}";
                css += "60%, 85% {left: -200px}";
                break;
            case ...:
                ...
                break;
        }
        return css;
    }

    return {
        restrict: 'E',
        template: function (tElem, tAttrs) {
            return createAnimationCss(parseInt(tAttrs.message));
        }
    }
});

Usage example:

<my-css-div message="{{num_messages}}"></my-css-div>

UPDATE:

If num_messages may change or be asynchronously initialized later on, use the linking function and $watch to monitor its changes:

app.directive('myCssDiv', function () {
    function createAnimationCss(num_messages) {...}

    return {
        restrict: 'E',
        scope: {
            message: '='
        },
        link: function myCssDivPostLink(scope, elem, attrs) {
            scope.$watch('message', function (newValue) {
                var num_messages = parseInt(newValue);   
                if (!isNaN(num_messages)) {
                    elem.html(createAnimationCss(num_messages));
                }
            });
        }
    }
});

Usage example:

<my-css-div message="num_messages"></my-css-div>

Using AngularJS to create CSS animations with @keyframes inside a directive is an innovative way

Answer №1

Similar questions

Update the CSS class for multiple elements that share the same ID on an HTML page

Replicating a Div Click Event using Enzyme and React

AngularJS: Simultaneous Login/Sign Up and Numerous Updates

In Bootstrap 5, the Col elements do not behave as inline elements

Is it possible for me to trigger a custom event using an eventBus listener?

Existing cookie is not defined when using ngCookies

Issues with Ajax functionality in Rails

Using AngularJS to apply custom css to a tag within a directive for creating a Bootstrap sticky footer

Developing a LoadRunner script to extract JSON data

What is the best way to inquire (or conduct a Google search) on combining objects from various database models?

Utilize AJAX to dynamically insert data into the database

Silver button seems blue on iPhone

Shift the input's focus after altering the select option using Element UI and Vue.js

Designing personalized plugins with Typescript in Nuxt

Automatically scroll the unselected tab to the bottom using code

Tips for adding two values simultaneously to an array in JavaScript

The CSS stylesheets are not compatible with IE7 and IE8

Blazor: Personalizing color variables in _root.scss - A Step-by-Step Guide

Using 'jquery.get' in combination with a servlet is

``Maintain user engagement with a dynamic menu by utilizing knockout for view switching and CSS