なぜこの移行は機能していませんか？ （jQueryのトグル+ CSS）

Question

クラスを切り替えると、トランジションは消えますか？私はHTMLも追加したいと思っていましたが、stackoverflowは私の質問が主にコードであり、私に保存させないと言っていました。それで、私はちょうど今働いているcodepenリンクを追加しました。

https://codepen.io/anon/pen/pdmpNE

<div class="container"> 
    <div class="row"> 
    <div class="col bg-primary one"> 
     <h1>some text</h1> 
    </div> 
    <div class="col bg-danger two"> 
     <h1>hidden text</h1> 
    </div> 
    </div> 
</div> 

.two { 
    visibility: hidden; 
    display: none; 
    opacity: 0; 
    transition: all 1s ease-out; 
} 

.is-visible { 
     display: block; 
      visibility: visible; 
      opacity: 1; 
      transition: all 1s ease-out; 
} 

$('.row').click(function(){ 
    $(this).children('.two').toggleClass('is-visible'); 
}); 

Answer 1

私はあなたが探していたものをつなぎ合わせと思いますが、すべてのコードを次の時刻形式にあなたの質問をしてください。また、Codepenを追加する場合は、実際にCSSとJSを追加してください。

私が変更したのは、2つ目のdivに.twoクラスを追加し、ドキュメントが準備できたら$（ '。row）.click（）関数を作成したことです。ここで

はHTMLです：

<div class="col bg-danger two"> 
    <h1>hidden text</h1> 
</div> 

はここにJSだ：

$('document').ready(function() { 
    $('.row').click(function(){ 
    $(this).children('.two').toggleClass('is-visible'); 
    }); 
}); 

Here's the Codepen displaying the changes.