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

Question

投资组合的代码片段，显示使用指定语言的元素。返回的 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>

每次元素 1...元素 2...等发生变化时，我都想要一个动画。

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了解更多信息