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

Question

我正在尝试提取嵌入到静态 HTML 页面的特定图像显示动画的 *.JS 和 CSS 代码:

遗憾的是，我正在查看的特定效果嵌入到多个图像动画的展示中，这使得从(巨大的)*.JS 和 *.CSS 文件中仅挑选必要的代码行变得极其困难:

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

虽然我能够识别一些与动画相关的代码，例如:

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

我需要手动识别所有其他必要的 CSS 部分，这是一项非常耗时且容易出错的任务，当必须以逆向工程方法搜索 8589 行 JavaScript 时，这几乎是不可能完成的任务。

此外，这种方法会导致耗时的试错阶段，以验证是否已识别和复制所有必要的部分。

是否有任何插件、解决方法或更有效的方法来定位特定的 CSS 和 JavaScript 代码，而无需手动搜索完整代码？

Answer 1

您要找的插件可用here .搜索 liquidReveal。

因为这个链接随时都可能失效，所以我把代码贴在这里

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();
});