Question

这会动态我的img滑动in，但我想让它动画out。我已经尝试在click上添加一个类，但它似乎不起作用。有任何见解赞赏。

IMG：

<img id="slide" src="img/40-Slide.png">

CSS SLIDE-IN（正常）：

#slide {
    position: absolute;
    left: -785px;
    width: 246px;
    height: 685px;
     -webkit-animation: slide 0.5s forwards;
     animation: slide 0.5s forwards;    
}


@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

CSS SLIDE-OUT（不工作）：

.slideOut {
    position: absolute;
    left: 0px;
    width: 246px;
    height: 685px;
     -webkit-animation: slideOut 0.5s forwards;
     animation: slideOut 0.5s forwards; 

}

@-webkit-keyframes slideOut {
    100% { left: -175px; }
}

@keyframes slideOut {
    100% { left: -175px; }
}

JQUERY：

    $("#page8").click(function(){
        $('#slide').addClass('slideOut');
        });

Answer 1

CSS特异性

更改

.slideOut {

到

#slide.slideOut {

    $("body").click(function(){
        $('#slide').addClass('slideOut');
        });

#slide {
    position: absolute;
    left: -785px;
    width: 246px;
    height: 685px;
     -webkit-animation: slide 0.5s forwards;
     animation: slide 0.5s forwards;    
}


@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}




#slide.slideOut {
    position: absolute;
    left: 0px;
    width: 246px;
    height: 685px;
     -webkit-animation: slideOut 0.5s forwards;
     animation: slideOut 0.5s forwards; 

}

@-webkit-keyframes slideOut {
    100% { left: -175px; }
}

@keyframes slideOut {
    100% { left: -175px; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="slide" src="img/40-Slide.png">

将类添加到.img不会产生动画

1 个答案: