Question

我不确定这是否属于CSS问题或javascript问题。我有一个javascript文本旋转器，它旋转一个句子中不同可能的单词列表，交换单个单词来改变句子所说的内容。

除了第一次加载之外，它完美地工作，它为其他单词选项留下了空间，即使它们没有被显示。在更改第一个单词更改后，间距就更正了。

描述它的最佳方式是向您展示，请查看脚本首次加载句子的间距，以及它在5秒后如何自行纠正。

＆＃13;

Future

＆＃13;

/**
 * The new fancy VanillaJS rotaterator
 * @param {string} selector 
 * @param {object} options 
 */
function rotaterator(selector, options) {
    var defaults = {
        fadeSpeed: 500,
        pauseSpeed: 500,
        child: null
    };

    var options = Object.assign(defaults, options);
    var items = document.querySelectorAll(selector);
    var allSpans = [];

    /**
     * Fade all elements of the given array in by setting display and opacity
     * @param {array} arrElements 
     */
    function fadeElementsIn(arrElements) {
        arrElements.forEach(function (e) {
            if (e.style.display === 'none') {
                // if we are setting from none directly to inline, we need a small delay
                e.style.display = 'inline';
                window.setTimeout(function () {
                    e.style.opacity = 1;
                }, 10);
            } else
                e.style.opacity = 1;
        });
    }

    /**
     * Hide all previously cached span elements by setting display to none
     */
    function hideAll() {
        allSpans.forEach(function (e) {
            e.style.display = 'none';
        });
    }

    /**
     * Set initial styles and transition and fade first elements in
     */
    function initialize(onInitialized) {
        var initialFadeIn = [];
        items.forEach(function (item) {
            var spans = item.querySelectorAll('span');
            spans.forEach(function (span) {
                allSpans.push(span);
                span.style.opacity = 0;
                span.style.transition = (options.fadeSpeed / 1000) + 's linear';
            });

            initialFadeIn.push(spans[0]);
        });

        // finally fade the first set of elements in and call the callback
        window.setTimeout(function () {
            fadeElementsIn(initialFadeIn);
            onInitialized();
        }, 10);
    }

    /**
     * Fade the current items out and fade the next items in
     */
    function next() {
        window.setTimeout(function () {
            var toFadeIn = [];

            items.forEach(function (item) {
                var nextIndex;
                for (var i = 0; i < item.children.length; i++) {
                    if (item.children[i].style.opacity == 1) {
                        // fade current item out
                        item.children[i].style.opacity = 0;

                        // set next index to fadeIn
                        nextIndex = (i + 1 > item.children.length - 1 ? 0 : i + 1);
                    }
                }

                // save the next element to array
                toFadeIn.push(item.children[nextIndex]);
            });

            // wait for fade out transition effect to complete and then fade all new elements in
            window.setTimeout(function () {
                hideAll();
                fadeElementsIn(toFadeIn);

                // after fadeIn transition effect call this method recursive.
                window.setTimeout(function () {
                    next();
                }, options.fadeSpeed);
            }, options.fadeSpeed);
        }, options.pauseSpeed);
    }

    initialize(next);
}

ready(function () {
    rotaterator('.rotate', { fadeSpeed: 500, pauseSpeed: 6000 });
});

/**
 * Polyfill for Object.assign
 */
if (typeof Object.assign != 'function') {
    Object.assign = function (target) {
        'use strict';
        if (target == null) {
            throw new TypeError('Cannot convert undefined or null to object');
        }

        target = Object(target);
        for (var index = 1; index < arguments.length; index++) {
            var source = arguments[index];
            if (source != null) {
                for (var key in source) {
                    if (Object.prototype.hasOwnProperty.call(source, key)) {
                        target[key] = source[key];
                    }
                }
            }
        }
        return target;
    };
}

/**
 * document.ready function without jQuery
 * @param {function} fn 
 */
function ready(fn) {
    if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
        fn();
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}

＆＃13;

.rotate {display: inline-block;}

＆＃13;

我已经尝试将其他单词选项设置为最初不显示，但这并没有帮助。任何人都可以帮助我，请确定为什么我的文本旋转器最初离开空间以显示未显示的单词？

Answer 1

您的span第一次可见（只是透明），您需要正确隐藏它们（显示无）

您可以在css中执行此操作：

.rotate span + span { display: none; }

Answer 2

不透明度= 0不会崩溃，它将占据应有的空间。在初始化功能中，只需替换此行：

span.style.opacity = 0;

通过

span.style.display="none";

Answer 3

其Java脚本加载问题。所以你必须在Java脚本的初始设置inline或css来隐藏所有的旋转div而不是set hide property。

javascript文本旋转器上的初始间距问题

3 个答案: