Question

投资组合的代码片段，显示使用指定语言的项目。返回的divs INSTANTLY会改变，但是当我们改变它时我想要一个动画效果。继承人我的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 ...等时更改动画。

Answer 1

我有两种基本的方法来完成你想要做的事情。

你可以

添加/删除一个类以转换为您想要的任何样式。
使用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以获取更多信息

单击按钮时如何为动态更改的div设置动画

1 个答案: