複数の行のアニメーションテキストの下線（左から右の描画アニメーション）

Question

複数の行のテキストの1行（ホバー上）で以下のコードで表示しているのと同じ効果をシミュレートする方法が狂っています。行テキスト。

.underline-on-hover 
 
{ 
 
    position:relative; 
 
    display:inline-block; 
 
} 
 

 
.underline-on-hover::after 
 
{ 
 
    content: " "; 
 
    background-color: red; 
 
    width:0; 
 
    position: absolute; 
 
    left:0; 
 
    bottom:0; 
 
    height:5px; 
 
    
 
    -webkit-transition: width 1s ease-in-out; 
 
    -moz-transition: width 1s ease-in-out; 
 
    -o-transition: width 1s ease-in-out; 
 
    transition: width 1s ease-in-out; 
 

 
} 
 

 
.underline-on-hover:hover::after 
 
{ 
 
    width:100%; 
 
}

<p class="underline-on-hover"> 
 
I'm a single line text! 
 
</p> 
 
<br><br> 
 
<p class="underline-on-hover" style="max-width:200px"> 
 
I'm a multiple line text... let me prove it: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
</p>

あなたが見ることができるように、私は、これは後にして単一行のテキストの左から右にアニメーションを「アンダーライン」をシミュレートすることができますが、私はそれを行う方法がわかりません複数行のテキストの場合、私の問題は、ダイナミックコンテナに動的テキストが挿入されるため、行に簡単に分割できないということです。

これを実現する方法はありますか？

ありがとうございました！

Answer 1

多分、あなたは、それぞれの行を指定するために、How to select nth line of text (CSS/JS) jQueryを使って試してみてください。

Answer 2

私は同じ問題を抱えていると思います。私はjsを使って決定を見つけました。それはie11から動作します（私は以下でテストしませんでした）。
主なことは、すべての行の幅を取得することです。

Codepen

パグ：

.container 
    .text Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi exercitationem quos, facere ipsum perspiciatis labore dolores, quibusdam, culpa numquam deleniti nihil ad. Tempore beatae nobis facere deserunt nam dicta earum. 
br 
br 
div.test 

SCSS：

.text { 
    display: inline-block; 
    line-height: 1.2; 
} 

.container { 
    position: relative; 
} 

.line { 
    position: absolute; 
    width: 0; 
    height: 2px; 
    background: red; 
    transition: width .5s; 
} 

.container:hover line { 
    left: 0; 
    right: auto; 
} 

JS：

function multilineTextUnderline() { 
    var text = document.querySelector('.text'); 
    var words = text.innerText.split(' '); 
    var div = document.querySelector('.test'); 

    var initialText = text.innerText; 
    var widths = []; 
    var lineHeight = parseInt($(text).css('line-height'), 10); 
    var firstWord = 0; 
    text.innerText = words[0]; 
    var currentHeight = text.offsetHeight; 

    $('.test span').remove(); 
    $('.test br').remove(); 

    function getWidths() { 
    words.forEach(function(word, i) { 
     text.innerText = words.slice(firstWord, i + 1).join(' '); 
     if(currentHeight < text.offsetHeight) { 
      text.innerText = words.slice(firstWord, i).join(' '); 
      widths.push(text.offsetWidth); 
      firstWord = i; 

      var newSpan = document.createElement('span'); 
      newSpan.innerText = text.innerText; 
      div.appendChild(newSpan); 
      div.appendChild(document.createElement('br')); 

      if(i === words.length - 1) { 
      text.innerText = words[i]; 
      widths.push(text.offsetWidth); 

      var newSpan = document.createElement('span'); 
      newSpan.innerText = text.innerText; 
      div.appendChild(newSpan); 
      div.appendChild(document.createElement('br')); 
      } 
     } else if(i === words.length - 1) { 
      widths.push(text.offsetWidth); 

      var newSpan = document.createElement('span'); 
      newSpan.innerText = words.slice(firstWord).join(' '); 
      div.appendChild(newSpan); 
      div.appendChild(document.createElement('br')); 
     } 
    }); 
    } 

    getWidths(); 
    text.innerText = initialText; 
    console.log('  widhts: ', widths); 
    var controlWidths = []; 

    [].forEach.call(document.querySelectorAll('.test span'), function(span) { 
     controlWidths.push(span.offsetWidth); 
    }); 
    console.log('control widths: ', controlWidths); 

    //rendering underlines 
    var container = document.querySelector('.container'); 
    var containerWidth = container.offsetWidth; 
    var lines = []; 
    $('.line').remove(); 

    widths.forEach(function(lineWidth, i) { 
    var line = document.createElement('div'); 
    line.classList.add('line'); 
    line.style.top = lineHeight * (i + 1) - 2 + 'px'; 

    lines.push(line); 
    }); 

    lines.forEach(function(line) { 
    container.appendChild(line); 
    }); 

    container.addEventListener('mouseenter', function() { 
    lines.forEach(function(line, i) { 
     line.style.width = widths[i] + 'px'; 
     line.style.left = 0; 
     line.style.right = 'auto'; 
    }); 
    }); 
    container.addEventListener('mouseleave', function() { 
    lines.forEach(function(line, i) { 
     line.style.width = 0; 
     line.style.left = 'auto'; 
     line.style.right = containerWidth - widths[i] + 'px'; 
    }); 
    }); 
} 

multilineTextUnderline(); 

window.addEventListener('resize', function() { 

    multilineTextUnderline(); 
});