взять текст (элемент dom) и поместить его в отдельный промежуток, а затем заставить его появляться в алфавитном порядке на странице - PullRequest
Новая
       6

взять текст (элемент dom) и поместить его в отдельный промежуток, а затем заставить его появляться в алфавитном порядке на странице

0 голосов
/ 10 мая 2018

Цель:

У меня есть текст от элемента dom, который поместит каждый символ в диапазон, и каждый диапазон будет отображаться в алфавитном порядке. Возникли проблемы с алфавитной частью

Код для размещения каждого символа в отдельном диапазоне: 

class SplitText{
    constructor(){

    }

    configureDomElement(domElement){

       let splitDomElement = domElement.textContent.split(''),
           span,
           spans = [];

           domElement.textContent = '';

            for(let i = 0; i < splitDomElement.length; i++){
                   span = document.createElement('span');
                   span.textContent = splitDomElement[i];
                   span.style.display ='inline-block';
                   span.id = 'span'+(i+1);

                   if(splitDomElement[i] === ' '){
                       span.style.paddingRight="1rem";
                   }

                   domElement.appendChild(span);
                   spans.push(span);
            };

       return spans;

    };


};


export default SplitText;

Застрял здесь: Код для размещения каждого символа в алфавитном порядкепорядок и анимация на экране: 

import SplitText from './SplitText';


class IntroAnimations{
    constructor() {

    }

    loadAnimations(){

        //text from dom element: cervini
        let loadingHeading = document.querySelector('#js-loading-heading');

        const configuredLoadingHeading = new SplitText().configureDomElement(loadingHeading);
        let sortedText;

        for(let i = 0; i < configuredLoadingHeading.length; i++){
            sortedText = configuredLoadingHeading[i].textContent.sort();
        }



        TweenLite.set(sortedText, {y: 0, opacity: 0});

        let tl = new TimelineLite();

        tl.staggerTo(sortedText, 4, {y: 0, opacity: 1}, 0.05);
}

};

export default IntroAnimations;

Спасибо!

...