получить дом текст построчно в js - PullRequest
1 голос
/ 27 февраля 2020

если у меня есть какой-нибудь текст на моем домике, похожий на этот

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolorum omnis accusamus ex impedit quas, magnam possimus
eum aspernatur delectus pariatur neque commodi voluptatibus
rerum odio sint voluptates! Sequi iste non perferendis. 
</p>

есть ли какой-нибудь способ для меня увидеть, где находятся разрывы строк?

Я хочу анимировать каждую исчезающую строку, но для динамического c контента, который работает быстро, поэтому я не могу быть тем, кто устанавливает разрывы строк.

Один запутанный способ, который я нашел, состоял в том, чтобы возьмите текст, оберните каждое слово в интервале, измерьте смещение каждого интервала и сортируйте их таким образом, но этот метод довольно неэффективен.

Ответы [ 2 ]

1 голос
/ 28 февраля 2020

GSAP's Плагин SplitText сделает это за вас! Проверьте это демо и документы для получения дополнительной информации и демонстраций.

const mySplitText = new SplitText("p", {type:"words,chars"}), 
const chars = mySplitText.chars; // an array of all the divs that wrap each character

tl.from(chars, {duration: 0.8, opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50",  ease:"back", stagger: 0.01}, "+=0");
0 голосов
/ 27 февраля 2020

Вы можете использовать функцию split через разрывы строк (\n):

const pEl = document.getElementById('text')

console.log(pEl.innerHTML.split('\n'))
<p id="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolorum omnis accusamus ex impedit quas, magnam possimus
eum aspernatur delectus pariatur neque commodi voluptatibus
rerum odio sint voluptates! Sequi iste non perferendis. 
</p>
...