Css transitionの使い方は？

Question

私は、CSSとJavaScriptを使用してテキスト略記を試しました。

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; 
} 

JS、次のように

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/

、私は突然、より多くのリンクをクリックした場合残りのコンテンツを表示するが、残りのコンテンツをゆっくりと表示したい。私はどこでトランジションを使用するのかわかりません。誰でもトランジションの使い方を教えて、それをどこで使うべきですか？

Answer 1

CSSトランジションを表示に使用することはできません。/表示ブロック;

しかし、jQuery slideToggle（）を試すことができます。 私は簡単なフィドルを作成しました。完璧ではありません。単なる一例

[https://jsfiddle.net/v4x564jf/][1]