Rena JavaScript-effekter

Jag använder ofta slideup, slideDown, slideToggle, fadeIn, fadeOut och fadeToggle som effekter i mina projekt. Jag har använt JQuery mycket men vill minska mitt beroende av det ramverket och göra allt i VanillaJS.

Jag tänkte först att jag skulle lägga till effekter direkt på HTMLElement (HTMLElement.prototype.FUNCTIONNAME) men läste att det inte var en bra idé.

Det här tillägget har testats och fungerar med Google Chrome (75.0.3770.100), Mozilla Firefox (67.0.4), Microsoft Edge (42.17134.1.0) och Internet Explorer (11.829.17134.0), detta utan någon polyfill. Om du vill stödja äldre webbläsare (requestAnimationFrame) kan du läsa vårt inlägg om transpilering och komplettering av JavaScript.

JavaScript

Jag har skapat en JavaScript plugin med funktioner i ett namnområde för att se till att funktionsnamn inte kolliderar med namn i andra JavaScript-bibliotek.

var annytab = annytab || {};
annytab.effects = (function () {

    'use_strict';

    // Public methods
    return {

        slideDown: function (el, duration, display) {

            // Return if the element is visible
            if (this.isVisible(el) === true) {
                return;
            }

            // Set default values for parameters
            duration = duration || 1000;
            display = display || 'block';

            // Display the element
            el.style.display = display;

            // Create variables
            var start = null;
            var height = el.offsetHeight;
            var overflow = el.style.overflow;

            // Set height and hide overflow
            el.style.height = '0';
            el.style.overflow = 'hidden';

            // Run animation
            function run(timestamp)
            {
                // Set start time
                if (!start) start = timestamp;

                // Calculate progress
                var progress = height * ((timestamp - start) / duration);

                // Set element height
                el.style.height = Math.min(progress, height) + 'px';

                // Check if the animation should end
                if (progress < height)
                {
                    window.requestAnimationFrame(run);
                }
                else
                {
                    // Reset element
                    el.style.height = '';
                    el.style.overflow = overflow;
                }
            }

            // Start animation
            window.requestAnimationFrame(run);

            // Return the element
            return el;
        },
        slideUp: function (el, duration) {

            // Return if the element not is visible
            if (this.isVisible(el) === false) {
                return;
            }

            // Set default values for parameters
            duration = duration || 1000;

            // Create variables
            var start = null;
            var height = el.offsetHeight;
            var overflow = el.style.overflow;

            // Hide overflow
            el.style.overflow = 'hidden';

            // Run animation
            function run(timestamp)
            {
                // Set start time
                if (!start) start = timestamp;

                // Calculate progress
                var progress = height - (height * ((timestamp - start) / duration));

                // Set element height
                el.style.height = Math.max(progress, 0) + 'px';

                // Check if the animation should end
                if (progress > 0)
                {
                    window.requestAnimationFrame(run);
                }
                else
                {
                    // Reset element
                    el.style.display = 'none';
                    el.style.height = '';
                    el.style.overflow = overflow;
                }
            }

            // Start animation
            window.requestAnimationFrame(run);

            // Return the element
            return el;
        },
        slideToggle: function (el, duration, display) {

            // Set default values for parameters
            duration = duration || 1000;
            display = display || 'block';

            // Check if we should slide up or slide down
            if (this.isVisible(el) === true) {
                this.slideUp(el, duration);
            }
            else {
                this.slideDown(el, duration, display);
            }

            // Return the element
            return el;
        },
        fadeIn: function (el, duration, display) {

            // Return if the element is visible
            if (this.isVisible(el) === true) {
                return;
            }

            // Set default values for parameters
            duration = duration || 1000;
            display = display || 'block';

            // Display the element
            el.style.display = display;

            // Create variables
            var start = null;

            // Set opacity
            el.style.opacity = 0.00;
            el.style.filter = 'alpha(opacity=0)'; /* For IE8 and earlier */

            // Run animation
            function run(timestamp)
            {
                // Set start time
                if (!start) start = timestamp;

                // Calculate progress
                var progress = 100 * (timestamp - start) / duration;

                // Set element opacity
                el.style.opacity = Math.min(progress, 100) / 100;
                el.style.filter = 'alpha(opacity=' + Math.min(progress, 100) + ')'; /* For IE8 and earlier */

                // Check if the animation should end
                if (progress < 100) {
                    window.requestAnimationFrame(run);
                }
                else {
                    // Reset element
                    el.style.opacity = '';
                    el.style.filter = ''; /* For IE8 and earlier */
                }
            }

            // Start animation
            window.requestAnimationFrame(run);

            // Return the element
            return el;
        },
        fadeOut: function (el, duration) {

            // Return if the element not is visible
            if (this.isVisible(el) === false) {
                return;
            }

            // Set default values for parameters
            duration = duration || 1000;

            // Create variables
            var start = null;

            // Set opacity
            el.style.opacity = 1.00;
            el.style.filter = 'alpha(opacity=100)'; /* For IE8 and earlier */

            // Run animation
            function run(timestamp)
            {
                // Set start time
                if (!start) start = timestamp;

                // Calculate progress
                var progress = 100 - (100 * ((timestamp - start) / duration));

                // Set element opacity
                el.style.opacity = Math.max(progress, 0) / 100;
                el.style.filter = 'alpha(opacity=' + Math.max(progress, 0) + ')'; /* For IE8 and earlier */

                // Check if the animation should end
                if (progress > 0)
                {
                    window.requestAnimationFrame(run);
                }
                else {
                    // Reset element
                    el.style.display = 'none';
                    el.style.opacity = '';
                    el.style.filter = ''; /* For IE8 and earlier */
                }
            }

            // Start animation
            window.requestAnimationFrame(run);

            // Return the element
            return el;
        },
        fadeToggle: function (el, duration, display) {

            // Set default values for parameters
            duration = duration || 1000;
            display = display || 'block';

            // Check if we should fade out or fade in
            if (this.isVisible(el) === true) {
                this.fadeOut(el, duration);
            }
            else {
                this.fadeIn(el, duration, display);
            }

            // Return the element
            return el;
        },
        isVisible: function (el) {
            if (typeof el === 'undefined' || el === null) { return false; }
            return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
        }
    };

})();

Så här använder du denna plugin

Använd en loop för att applicera en effekt på många element. Du måste lägga till ett elementet som en parameter i en funktion, andra parametrar har standardvärden.

function toggleForm()
{
    // Get the container
    var container = document.getElementById('inputForm');

    // Check if it is visible
    var visible = annytab.effects.isVisible(container);

    // Hide all containers
    var collection = document.getElementsByClassName('hideable');
    for (var i = 0; i < collection.length; i++) {
        annytab.effects.slideUp(collection[i], 500);
    }

    // Show the container if it wasn't visible
    if (visible === false) {
        annytab.effects.slideDown(container, 500);
    }

} // End of the toggleForm method

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *