ボタンをクリックしたときに動的に変化するdivをアニメーション化する方法

Question

指定された言語を使用しているプロジェクトを示すポートフォリオのコードスニペット。返されるdivは即座に変更されますが、変更されるとアニメーション効果が必要です。 Heres私のHTML：

   <div> 
        <button class="waves-effect waves-light btn-large" onclick="checkProjects('python');">Python</button> 
       </div> 
       <div> 
        <button class="waves-effect waves-light btn-large" onclick="checkProjects('javascript');">Javascript</button> 

       </div> 

      <div class="col s6 project-list"> 
       <div class = "project1 col s12"> 
        <div id="project1Title" class="project-title col s12"></div> 
        <img id="project1Pic" class="project-picture col s6" src=""> 
        <div id ="project1Caption" class="col s6"></div> 
       </div> 
       <div class="project2 col s12"> 
        <div id="project2Title" class="project-title col s12"></div> 
        <img id="project2Pic" class="project-picture col s6" src=""> 
        <div id ="project2Caption" class="project-caption col s6"></div> 
       </div> 
      </div> 

アニメーション毎回プロジェクト1 ...プロジェクト2 ...などが変更されていますか？

Answer 1

あなたがしようとしていることを達成するために私が考えることができる基本的な2つの方法があります。

あなたはどちらか

1. あなたが好きなスタイルに移行するためのクラスを追加/削除することができます

   。

2. javascriptまたはjqueryを使用してトランジションを手動でアニメーション化します。

あなたのアニメーションがより複雑で、jqueryを使用するのが最適かもしれません。

// When the user clicks on a project 
$('.project').on('click',function() { 

    // Animate the project element 
    $(this).animate({ 
    opacity:1 
    },{duration:200,queue:false}) 

    // To access this specific project's child 
    // elements (ie, title, picture, caption) you will 
    // need to use .children 
    $(this).children('.project-title').animate({ 
    opacity:1, 
    top:'50px' 
    },{duration:200,queue:false}) 
}) 

jQueryのアニメーション機能は、複雑な、多素子のアニメーションのために非常に有用詳細