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é.

Kod

Jag har skapat en JavaScript-fil 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 = 400, display = 'block') {
            // Return if the element is visible
            if (this.isVisible(el) === true) {
                return;
            }

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

            // Create variables
            var counter = 0;
            var height = el.offsetHeight;
            var adder = height / (duration / 10);

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

            // Increase the height of the element every 10 ms
            var interval = setInterval(function () {
                counter += adder;
                if (counter < height) {
                    // Set element height
                    el.style.height = counter + 'px';
                }
                else {
                    // Reset the element and clear the interval
                    el.style.height = '';
                    el.style.overflow = '';
                    clearInterval(interval);
                }

            }, 10);

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

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

            // Create variables
            var height = el.offsetHeight;
            var counter = height;
            var subtractor = height / (duration / 10);

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

            // Decrease the height of the element every 10 ms
            var interval = setInterval(function () {
                counter -= subtractor;
                if (counter > 0) {
                    // Set element height
                    el.style.height = counter + 'px';
                }
                else {
                    // Reset the element and clear the interval
                    el.style.display = 'none';
                    el.style.overflow = '';
                    el.style.height = '';
                    clearInterval(interval);
                }

            }, 10);

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

            if (this.isVisible(el) === true) {
                this.slideUp(el, duration);
            }
            else {
                this.slideDown(el, duration, display);
            }

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

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

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

            // Create variables
            var counter = 0;
            var adder = 100 / (duration / 10);

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

            // Increase the opacity of the element every 10 ms
            var interval = setInterval(function () {
                counter += adder;
                if (counter < 100) {
                    // Set element opacity
                    el.style.opacity = (counter / 100);
                    el.style.filter = 'alpha(opacity = ' + counter + ')'; /* For IE8 and earlier */
                }
                else {
                    // Reset the element and clear the interval
                    el.style.opacity = '';
                    el.style.filter = ''; /* For IE8 and earlier */
                    clearInterval(interval);
                }

            }, 10);

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

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

            // Create variables
            var counter = 100;
            var subtractor = 100 / (duration / 10);

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

            // Decrease the height of the element every 10 ms
            var interval = setInterval(function () {
                counter -= subtractor;
                if (counter > 0) {
                    el.style.opacity = (counter / 100);
                    el.style.filter = 'alpha(opacity = ' + counter + ')'; /* For IE8 and earlier */
                }
                else {
                    // Reset the element and clear the interval
                    el.style.display = 'none';
                    el.style.opacity = '';
                    el.style.filter = ''; /* For IE8 and earlier */
                    clearInterval(interval);
                }

            }, 10);

            // Return the element
            return el;
        },
        fadeToggle: function (el, duration = 400, display = 'block') {
            if (this.isVisible(el) === true) {
                this.fadeOut(el, duration);
            }
            else {
                this.fadeIn(el, duration, display);
            }

            // Return the element
            return el;
        },
        isVisible: function (el) {
            return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
        }
    };

})();

Hur använda klassen

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 *