单击按钮时如何为动态变化的div设置动画

Question

用于显示使用指定语言的项目的投资组合的代码的 sn-p。返回的 div 会立即更改，但我想要更改时的动画效果。这是我的 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>

每当 project1...project2...etc 发生变化时，我都想要一个动画。

Answer 1

我能想到的基本上有两种基本方法可以完成你想做的事情。

你可以

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 的动画功能对于复杂的多元素动画非常有用，查看here 了解更多信息