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

jsFiddle Two - 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/

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

1 个答案: