CSS3动画与jQuery触发的CSS3转换冲突？

Question

我设置了一个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; 
} 

JS

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一个 - http://jsfiddle.net/8ZFMJ/64/

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

Answer 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/