如何使用Css轉換？

我已經嘗試使用CSS和JavaScript的文本速記。如下如何使用Css轉換？

HTML

<div class=" comment more">Apache Subversion (often abbreviated SVN, after its command name svn) is a software versioning and revision control system distributed as open source under the Apache License. Software developers use Subversion to maintain current and historical versions of files such as source code, web pages, and documentation.Apache Subversion (often abbreviated SVN, after its command name svn) is a software versioning and revision control system distributed as open source under the Apache License. Software developers use Subversion to maintain current and historical versions of files such as source code, web pages, and documentation</div>

CSS

.comment { // 
    width: 100%; // 
    background-color: #f0f0f0; // 
    margin: 10px; 
} 

a.morelink { 
    text-decoration: none; 
    outline: none; 
} 

.morecontent span { 
    -webkit-transition: width 2s; 
    display: none; 
}

var showChar = 100; 
     var ellipsestext = "..."; 
     var moretext = "more"; 
     var lesstext = "less"; 
     $('.more').each(function() { 
      var content = $(this).html(); 

      if(content.length > showChar) { 

       var c = content.substr(0, showChar); 
       var h = content.substr(showChar-1, content.length - showChar); 

       var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>'; 

       $(this).html(html); 
      } 

     }); 

     $(".morelink").click(function(){ 
      if($(this).hasClass("less")) { 
       $(this).removeClass("less"); 
       $(this).html(moretext); 
      } else { 
       $(this).addClass("less"); 
       $(this).html(lesstext); 
      } 
      $(this).parent().prev().toggle(); 
      $(this).prev().toggle(); 
      return false; 
     });

Myfiddle：https://jsfiddle.net/Balakumar_B/v3xnpxvt/

在上面的代碼中

，如果我點擊更多信息鏈接突然顯示其餘內容，但我想慢慢顯示其餘內容。我不知道在哪裏使用過渡以及如何使用..所以任何人都可以提出使用過渡的技巧以及在哪裏使用它？

來源

2017-04-22 Balakumar B

我老兄我就不多說了JS，但我在這裏做的懸浮效果，如果你可以在你的js比可能會有所幫助添加:) https://jsfiddle.net/v3xnpxvt/3/ –