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

Question

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

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

下面是将过渡和动画应用到 div 的代码。有两个 fiddle ，一个显示 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/