选择或提取单个基于 JavaScript 的动画代码的最有效方法？

Question

I'm trying to extract the *.JS and CSS code of a specific image reveal animation that is embedded onto a static HTML page:

Sadly, the particular effect I'm looking at is embedded into a showcase of several image animations, which makes picking only the necessary lines of code from the (huge) *.JS and *.CSS file extremely difficult:

Image Animation is at the 'good design - good business' part

While I'm able to identify some of the code related to the animation, such as:

<div class="block-revealer__element" style="transform: scaleX(0); transform-origin: 100% 50%; background: rgb(240, 240, 240); opacity: 1;"></div>

I'm left with the enormously time consuming and error-prone task to identify all other necessary CSS parts manually, which becomes an almost impossible task when having to search through 8589 lines of JavaScript in a reverse engineering approach.

Additionally, this approach leads to a time-consuming trial & error phase to validate if whether or not all necessary parts have been identified and copied.

Is there any plugin, workaround or simply more efficient way to target specific CSS and JavaScript code without having to search through the complete code manually?

Answer 1

The plugin which you are looking for is available here . Search for liquidReveal .

Since this link can go down any time, i am posting the code here

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

/*
* Credits:
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 
* Copyright 2016, Codrops
* http://www.codrops.com
*/
;(function ($, window, document, undefined) {

    'use strict';

    var pluginName = 'liquidReveal';
    var defaults = {
        // If true, then the content will be hidden until it´s "revealed".
        isContentHidden: true,
        // If true, animtion will be triggred only when element is in view
        animteWhenInView: true,
        delay: 0,
        // The animation/reveal settings. This can be set initially or passed when calling the reveal method.
        revealSettings: {
            // Animation direction: left right (lr) || right left (rl) || top bottom (tb) || bottom top (bt).
            direction: 'lr',
            // Revealer´s background color.
            bgcolor: '#f0f0f0',
            // Animation speed. This is the speed to "cover" and also "uncover" the element (seperately, not the total time).
            duration: 500,
            // Animation easing. This is the easing to "cover" and also "uncover" the element.
            easing: 'easeInOutQuint',
            // percentage-based value representing how much of the area should be left covered.
            coverArea: 0,
            // Callback for when the revealer is covering the element (halfway through of the whole animation).
            onCover: function onCover(contentEl, revealerEl) {
                return false;
            },
            // Callback for when the animation starts (animation start).
            onStart: function onStart(contentEl, revealerEl) {
                return false;
            },
            // Callback for when the revealer has completed uncovering (animation end).
            onComplete: function onComplete(contentEl, revealerEl) {
                return false;
            },

            onCoverAnimations: null
        }
    };

    function Plugin(element, options) {

        this.element = element;

        this.options = $.extend({}, defaults, options);

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype = {

        init: function init() {

            this._layout();

            if (this.options.animteWhenInView) this.setIntersectionObserver();else this.doTheReveal();
        },

        _createDOMEl: function _createDOMEl(type, className, content) {
            var el = document.createElement(type);
            el.className = className || '';
            el.innerHTML = content || '';
            return el;
        },

        /**
  * Build the necessary structure.
  */
        _layout: function _layout() {

            var position = getComputedStyle(this.element).position;
            if (position !== 'fixed' && position !== 'absolute' && position !== 'relative') {
                this.element.style.position = 'relative';
            }
            // Content element.
            this.content = this._createDOMEl('div', 'block-revealer__content', this.element.innerHTML);
            if (this.options.isContentHidden && this.content.querySelector('figure')) {
                this.content.querySelector('figure').style.opacity = 0;
            }
            // Revealer element (the one that animates)
            this.revealer = this._createDOMEl('div', 'block-revealer__element');
            this.element.classList.add('block-revealer');
            this.element.innerHTML = '';
            this.element.appendChild(this.content);

            var parallaxElement = this.element.querySelector('[data-parallax=true]');

            if ((typeof parallaxElement === 'undefined' ? 'undefined' : _typeof(parallaxElement)) !== (typeof undefined === 'undefined' ? 'undefined' : _typeof(undefined)) && parallaxElement !== null) {

                parallaxElement.appendChild(this.revealer);
            } else {

                this.element.appendChild(this.revealer);
            }
        },

        /**
  * Gets the revealer element´s transform and transform origin.
  */
        _getTransformSettings: function _getTransformSettings(direction) {
            var val, origin, origin_2;

            switch (direction) {
                case 'lr':
                    val = 'scaleX(0)';
                    origin = '0 50%';
                    origin_2 = '100% 50%';
                    break;
                case 'rl':
                    val = 'scaleX(0)';
                    origin = '100% 50%';
                    origin_2 = '0 50%';
                    break;
                case 'tb':
                    val = 'scaleY(0)';
                    origin = '50% 0';
                    origin_2 = '50% 100%';
                    break;
                case 'bt':
                    val = 'scaleY(0)';
                    origin = '50% 100%';
                    origin_2 = '50% 0';
                    break;
                default:
                    val = 'scaleX(0)';
                    origin = '0 50%';
                    origin_2 = '100% 50%';
                    break;
            }

            return {
                // transform value.
                val: val,
                // initial and halfway/final transform origin.
                origin: { initial: origin, halfway: origin_2 }
            };
        },

        /**
  * Reveal animation. If revealSettings is passed, then it will overwrite the options.revealSettings.
  */
        reveal: function reveal(revealSettings) {
            // Do nothing if currently animating.
            if (this.isAnimating) {
                return false;
            }
            this.isAnimating = true;

            // Set the revealer element´s transform and transform origin.
            var defaults = { // In case revealSettings is incomplete, its properties deafault to:
                duration: 500,
                easing: 'easeInOutQuint',
                delay: parseInt(this.options.delay, 10) || 0,
                bgcolor: '#f0f0f0',
                direction: 'lr',
                coverArea: 0
            },
                revealSettings = revealSettings || this.options.revealSettings,
                direction = revealSettings.direction || defaults.direction,
                transformSettings = this._getTransformSettings(direction);

            this.revealer.style.WebkitTransform = this.revealer.style.transform = transformSettings.val;
            this.revealer.style.WebkitTransformOrigin = this.revealer.style.transformOrigin = transformSettings.origin.initial;

            // Set the Revealer´s background color.
            this.revealer.style.background = revealSettings.bgcolor || defaults.bgcolor;

            // Show it. By default the revealer element has opacity = 0 (CSS).
            this.revealer.style.opacity = 1;

            // Animate it.
            var self = this,

            // Second animation step.
            animationSettings_2 = {
                complete: function complete() {
                    self.isAnimating = false;
                    if (typeof revealSettings.onComplete === 'function') {
                        revealSettings.onComplete(self.content, self.revealer);
                    }
                    $(self.element).addClass('revealing-ended').removeClass('revealing-started');
                }
            },

            // First animation step.
            animationSettings = {
                delay: revealSettings.delay || defaults.delay,
                complete: function complete() {
                    self.revealer.style.WebkitTransformOrigin = self.revealer.style.transformOrigin = transformSettings.origin.halfway;
                    if (typeof revealSettings.onCover === 'function') {
                        revealSettings.onCover(self.content, self.revealer);
                    }
                    $(self.element).addClass('element-uncovered');
                    anime(animationSettings_2);
                }
            };

            animationSettings.targets = animationSettings_2.targets = this.revealer;
            animationSettings.duration = animationSettings_2.duration = revealSettings.duration || defaults.duration;
            animationSettings.easing = animationSettings_2.easing = revealSettings.easing || defaults.easing;

            var coverArea = revealSettings.coverArea || defaults.coverArea;
            if (direction === 'lr' || direction === 'rl') {
                animationSettings.scaleX = [0, 1];
                animationSettings_2.scaleX = [1, coverArea / 100];
            } else {
                animationSettings.scaleY = [0, 1];
                animationSettings_2.scaleY = [1, coverArea / 100];
            }

            if (typeof revealSettings.onStart === 'function') {
                revealSettings.onStart(self.content, self.revealer);
            }
            $(self.element).addClass('revealing-started');
            anime(animationSettings);
        },

        animationPresets: function animationPresets() {},

        setIntersectionObserver: function setIntersectionObserver() {

            var self = this;
            var element = self.element;

            self.isIntersected = false;

            var inViewCallback = function inViewCallback(enteries, observer) {

                enteries.forEach(function (entery) {

                    if (entery.isIntersecting && !self.isIntersected) {

                        self.isIntersected = true;

                        self.doTheReveal();
                    }
                });
            };

            var observer = new IntersectionObserver(inViewCallback, { threshold: 0.5 });

            observer.observe(element);
        },

        doTheReveal: function doTheReveal() {
            var onCoverAnimations = this.options.revealSettings.onCoverAnimations;


            var onCover = {

                onCover: function onCover(contentEl) {

                    $('figure', contentEl).css('opacity', 1);

                    if ($(contentEl).find('.ld-lazyload').length && window.liquidLazyload) {

                        window.liquidLazyload.update();
                    }

                    if (onCoverAnimations) {

                        var animations = $.extend({}, { targets: $('figure', contentEl).get(0) }, { duration: 800, easing: 'easeOutQuint' }, onCoverAnimations);

                        anime(animations);
                    }
                }
            };

            var options = $.extend(this.options, onCover);

            this.reveal(options);

            this.onReveal();
        },

        onReveal: function onReveal() {

            if ($(this.element).find('[data-responsive-bg]').length) {
                $(this.element).find('[data-responsive-bg]').liquidResponsiveBG();
            }
        }
    };

    $.fn[pluginName] = function (options) {

        return this.each(function () {

            var pluginOptions = $(this).data('reveal-options');
            var opts = null;

            if (pluginOptions) {
                opts = $.extend(true, {}, options, pluginOptions);
            }

            if (!$.data(this, "plugin_" + pluginName)) {

                $.data(this, "plugin_" + pluginName, new Plugin(this, opts));
            }
        });
    };
})(jQuery, window, document);

jQuery(document).ready(function ($) {

    $('[data-reveal]').filter(function (i, element) {

        var $element = $(element);
        var $fullpageSection = $element.closest('.vc_row.pp-section');

        return !$fullpageSection.length;
    }).liquidReveal();
});