为什么 textillate.js 无法处理 window 调整大小？

Question

每当 window 调整到 pc 和移动视图时，我想为我的标题设置动画，但 Textilate 仅在重新加载时执行。

这是我的代码：

function animateHeading() {
    $('#skysea').textillate({ 
        in: { effect: 'fadeInRight' } 
    });
    $('#on').textillate({ 
        initialDelay: 300,
        in: { effect: 'fadeInRight' } 
    });
    $('#cloud').textillate({ 
        initialDelay: 500,
        in: { effect: 'fadeInRight' } 
    });
}

$(window).resize(function() {
    if($(window).width() < 769) {
        animateHeading();
    }
    if($(window).width() >= 769) {
        animateHeading();
    }
});

我想在不重新加载页面的情况下将 window 调整为 PC 或移动视图时为文本添加动画效果。

Answer 1

根据 documentation:

$element.textillate('start') - Manually start/restart textillate

此外，您的 resize 功能总是会在您检查宽度是否小于 769 时调用 animateHeading 然后检查是否等于或大于 769。

这是一个实际示例（我已将 textillate selectors/options 移动到全局变量中，以便两个函数都可以访问它）：

$(function() {
    // key/val object of selector => textillate options
    var animations = {
        '#skysea': {
            in: { effect: 'fadeInRight' }
        },
        '#on': {
            in: { effect: 'fadeInRight' }
        },
        '#cloud': {
            initialDelay: 500,
            in: { effect: 'fadeInRight' }
        }
    }

    // call textillate using selector/options
    function animateHeading() {
        for (var selector in animations) {
            $(selector).textillate(animations[selector]);
        }
    }

    // call .textillate('start') to start/restart animation as per documentation
    function restartAnimations() {
        // get the selectors as a single string, i.e. "#skysea,#on,#cloud"
        var selectors = Object.keys(animations).join(",");

        $(selectors).textillate('start');
    }

    // animate headings on page load
    animateHeading();

    // bind restartAnimations function on window resize
    $(window).resize(function() {
        restartAnimations();
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.min.js" integrity="sha256-Tvi6rQj7jAzxY1J8UaFlagR6+ZtWVctieK8pFawiY8Q=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js" integrity="sha256-7sov0P4cWkfKMVHQ/NvnWVqcLSPYrPwxdz+MtZ+ahl8=" crossorigin="anonymous"></script>

<p id="skysea">Lorem ipsum dolor sit amet.</p>
<p id="on">Lorem ipsum dolor sit amet.</p>
<p id="cloud">Lorem ipsum dolor sit amet.</p>

为什么 textillate.js 无法处理 window 调整大小？

Why is textillate.js not working on window resize?

jquery

jquery-textillate