CSS3 动画与 jQuery 触发的 CSS3 过渡冲突？答案

【问题标题】：CSS3 Animation conflicting with CSS3 transition that's triggered by jQuery?CSS3 动画与 jQuery 触发的 CSS3 过渡冲突？
【发布时间】：2014-04-07 09:09:14
【问题描述】：

我设置了一个 div，以便在单击按钮时，该 div 会向上扩展以查看更多内容。第二次点击按钮会向下滑动。我用JS来做这个，效果很好。

其次，我在同一个 div 中添加了一个动画，以便在动画中的某些点上，div 上下滑动。一旦我添加了这个动画就可以正常工作，但是转换和单击按钮以向上/向下滑动 div 不再起作用，我不明白为什么？

下面是同时应用于 div 的过渡和动画的代码。有两个小提琴，一个显示 jQuery 自己向上/向下滑动，第二个显示下面的代码。

任何帮助将不胜感激。

HTML

<div class="wrapper">
       <div class="content-wrapper">
           <div class="padLeft">
                <h2>Project Title</h2>
                <div class="crossRotate"> Open </div>
           </div>
           <div class="padLeft">
                <p>Paragraph Goes Here</p>
                <h3>Play Video</h3>
           </div>
       </div>
</div>

CSS

.wrapper {
    width: 100%;
    height: 100px;
    position: absolute;
    overflow: hidden;
    margin: 0;
    padding:0;
    z-index: 1;
}

@-webkit-keyframes titledrop {
    0%, 25%, 50%, 75%, 100%{ bottom: -215px;}
    5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{ bottom: -90px;}
}

@-moz-keyframes titledrop {
    0%, 25%, 50%, 75%, 100%{ bottom: -215px;}
    5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{ bottom: -90px;}
}

@keyframes titledrop {
    0%, 25%, 50%, 75%, 100%{ bottom: -215px;}
    5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{ bottom: -90px;}
}

.content-wrapper {
    position: absolute;
    z-index: 999;
    background: red;
    bottom: -90px;
    width: 100%;
    -webkit-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
    -moz-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
    -o-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
    -ms-animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
    animation: titledrop 60s cubic-bezier(0.19, 1, 0.22, 1) infinite;
    -webkit-transition: bottom 1s ease-in;
    -moz-transition: bottom 1s ease-in; 
    -o-transition: bottom 1s ease-in;
    -ms-transition: bottom 1s ease-in;
    transition: bottom 1s ease-in;  
}

.crossRotate {
    position: absolute;
    background-color: blue;
    z-index: 1;
    cursor: pointer;
}

var clicked=true;
$(".crossRotate").on('click', function() {
    if(clicked) {
        clicked=false;
        $(".content-wrapper").css({"bottom": "-90px"});
    } else {
        clicked=true;
        $(".content-wrapper").css({"bottom": "0"});
    }
});

jsFiddle One - http://jsfiddle.net/8ZFMJ/64/

jsFiddle 二 - http://jsfiddle.net/8ZFMJ/63/

【问题讨论】：

标签： javascript jquery css animation transition

【解决方案1】：

我不知道你想要什么，但如果我明白了，这就是你需要的。我不喜欢这样，但你知道你想要什么。在这里寻求帮助。问候！

var clicked=false;
$(".crossRotate").on('click', function(){
    if(clicked){
        clicked=false;
        $(".content-wrapper").animate({"height": "162px"});
    }else{
        clicked=true;
        $(".content-wrapper").animate({"height": "280px"});
    }
});

http://jsfiddle.net/8ZFMJ/65/

【讨论】：