从底部css动画中提升（显示）文本

Question

我刚刚浏览网页， 在这里找到了一些很酷的文字动画。 所以我想考虑采取一部分并扩展它。 据我所知，首先要通过堆栈查看是否有任何问题与我的想法有关，令我惊讶的是，我找到了一个解释我需要的东西，但没有正确回答。 我猜主要原因是因为没有正确解释。 所以我会尽力解释这个想法。

以前问的问题

想法。

让我们假设我有一个标题标签，我需要动画。 他们的主要想法是不要将一个相同的句子分成两个而不是如果你写一个标题或段落标记整个事物应该动画。 我想从图像中提取/显示/提升单词（从行开始）

我已从我获得的源代码中更改了一些现有代码。 但是文本从整个块的底部透露/提升。 我不想要的。 我希望它从底部的线上提升它们。

代码：

 // Wrap every letter in a span $('.ml16').each(function() { $(this).html($(this).text().replace(/([^\\x00-\\x80]|\\w)/g, "<span class='letter'>$&</span>")); }); anime.timeline({ loop: true }) .add({ targets: '.ml16 .letter', translateY: [100, 0], easing: "easeOutExpo", duration: 1400, delay: function(el, i) { return 30 * i; } }).add({ targets: '.ml16', opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); 

 .wrap { width: 700px; margin: 100px auto; } .ml16 { color: #402d2d; padding: 40px 0; font-weight: 800; font-size: 2em; text-transform: uppercase; letter-spacing: 0.5em; overflow: hidden; text-transform: uppercase; font-family: sans-serif; } .ml16 .letter { display: inline-block; line-height: 2em; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script> <div class="wrap"> <h1 class="ml16"><span>Made with love for a testing purpose</span></h1> </div> 

有人可以帮我把我不完整的想法推到目的地吗？

Answer 1

你需要做的是将每个单词换成另一个跨度（例如， <span class="word"></span> ）并设置一个overflow: hidden到那个 - 看看这个小提琴： https ： //jsfiddle.net/w5uz4mex /

这将确保每个单词在动画时独立“隐藏”。

 // Wrap every word in a span $('.ml16').each(function() { let text = $(this).text(); let words = text.split(' '); // Clear current element this.innerHTML = ''; // Loop through each word, wrap each letter in a span for(let word of words) { let word_split = word.replace(/([^\\x00-\\x80]|\\w)/g, "<span class='letter'>$&</span>"); // Wrap another span around each word, add word to header this.innerHTML += '<span class="word">' + word_split + '</span>'; } }); anime.timeline({ loop: true }) .add({ targets: '.ml16 .letter', translateY: [100, 0], easing: "easeOutExpo", duration: 1400, delay: function(el, i) { return 30 * i; } }).add({ targets: '.ml16', opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 1000 }); 

 .wrap { width: 700px; margin: 100px auto; } .ml16 { color: #402d2d; padding: 40px 0; font-weight: 800; font-size: 2em; text-transform: uppercase; letter-spacing: 0.5em; overflow: hidden; text-transform: uppercase; font-family: sans-serif; } .ml16 .word { display: inline-block; overflow: hidden; height: 2em; margin: 0 0.4em; } .ml16 .letter { display: inline-block; line-height: 2em; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrap"> <h1 class="ml16">Made with love for a testing purpose</h1> </div> 

编辑： 作为奖励（无关），这可以非常简单地完成，没有jQuery，而是使用CSS动画。 这也为您提供了非常容易通过CSS添加新动画的好处，而无需触摸JS。 这只是一个快速演示，因此应仅用作起点（即它尚未针对任何生产环境进行测试）。

有关slideUp，slideDown和zoomIn的示例，请参见下文

 /** * Create new class for sliding text * * @params {Element} wrapper - HTML element with text content */ class TextSliderUpper { constructor(wrapper) { this.wrapper = wrapper; // Set delay between characters (in ms) this.delay = 40; // Wrap content in relevant wrappers this._wrapContent(); } _wrapContent() { let words = this.wrapper.textContent.split(' '); let delay = 0; let content = ''; // Loop through each word, wrap each character in a span words.forEach((word, multiplier) => { let word_split = word.split(/([^\\x00-\\x80]|\\w)/g); let word_content = ''; // Look through each letter, add a delay (incremented) word_split.forEach((char, index) => { delay += this.delay; word_content += `<span style="animation-delay: ${delay}ms">${char}</span>`; }); // Add spacing between words if (content !== '') content += ' '; // Add wrapped words to content content += `<span>${word_content}</span>`; }) // Add content to wrapper this.wrapper.innerHTML = content; } init() { this.wrapper.classList.add('show'); } } // Get a list of all headers let headers = document.querySelectorAll('[data-animate]'); // Loop through, add relevant class Array.from(headers).forEach(header => { let slideHeader = new TextSliderUpper(header); // Allow for delays? Sure! let delay = header.dataset.delay || 0; // Delay class (if necessary) setTimeout(() => { slideHeader.init(); }, delay) }) 

 body { font-family: sans-serif; } h1 { text-transform: uppercase; font-weight: bold; letter-spacing: 0.1em; } [data-animate] { line-height: 1.2em; } [data-animate] > span { display: inline-block; height: 1.2em; overflow: hidden; } [data-animate] > span > span { display: none; animation: 3s cubic-bezier(0, 1.2, 0.1, 0.9); animation-fill-mode: backwards; } [data-animate].show > span > span { display: inline-block; } [data-animate=slideup] > span > span { animation-name: slideUp; } [data-animate=zoomin] > span > span { animation-name: zoomIn; } [data-animate=slidedown] > span > span { animation-name: slideDown; } @keyframes slideUp { from { opacity: 0; transform: translate(0, 1.2em); } } @keyframes zoomIn { from { opacity: 0; transform: scale(0); } } @keyframes slideDown { from { opacity: 0; transform: translate(0, -1.2em); } } 

 <h1 data-animate="slideup">This is some text. Hello there!</h1> <hr /> <h1 data-animate="zoomin" data-delay="2000">I am delayed!</h1> <hr /> <h1 data-animate="slidedown" data-delay="7000">I am late to the party!</h1>