jquery – 使用css打开和关闭动画 – 更好的动画效果

2019年7月21日 249次阅读

我正在玩
here的开/关监视器效果,虽然我的动画不在开关上,但是在窗口滚动上.我把它设置成这样：

$(window).on('scroll', function () {
    var sctop = $(this).scrollTop();
    var element_top = $('.image_animation').offset().top;
    if (sctop > element_top) {
        $('.image_animation').addClass('off');
    } else {
        $('.image_animation').removeClass('off');
    }
});
.before_content {
    height: 300px;
}
.after_content {
    height: 800px;
}
.container {
    position: relative;
}
.image_animation {
    display: inline-block;
    position: relative;
}
.image_animation img {
    z-index: 100;
}
.image_animation .background_image {
    width: 94%;
    height: 73%;
    z-index: -1;
    position: absolute;
    top: 4%;
    left: 3%;
    -webkit-background-size: cover!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    animation: imac 10s linear 2s infinite;
}
@keyframes turn-off {
    0% {
        transform: scale(1, 1.3) translate3d(0, 0, 0);
        -webkit-filter: brightness(1);
        filter: brightness(1);
        opacity: 1;
    }
    60% {
        transform: scale(1, 0.001) translate3d(0, 0, 0);
        -webkit-filter: brightness(10);
        filter: brightness(10);
    }
    100% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -webkit-filter: brightness(50);
        filter: brightness(50);
    }
}
.image_animation.off > .background_image {
    animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    animation-fill-mode: forwards;
}
.image_animation:before {
    content:"";
    width: 94%;
    height: 73%;
    z-index: -1;
    position: absolute;
    top: 4%;
    left: 3%;
    background: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="before_content"></div>
<div class="container">
    <div class="image_animation">
        <img src="http://i.imgur.com/DL7AUy3.png" alt="">
        <div class="background_image" style="background:url(http://i.imgur.com/VRcQKtY.jpg);"></div>
    </div>
</div>
<div class="after_content"></div>

关闭动画效果不错,但是我开启动画时遇到了问题.我不需要像原来的codepen那样花哨的东西,淡入就足够了.我尝试添加类,然后使用它来启动某种css更改,但没有运气.我也尝试过动画,但是效果不好.目前我的形象刚刚出现,这有点蹩脚.

任何想法如何在重新滚动时进行此转换？

最佳答案 为要添加的.on类添加额外的样式

.image_animation.on > .background_image {
    animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1) reverse;
    animation-fill-mode: backwards;
}

并将你的javascript更改为

 $(window).on('scroll', function () {
     var sctop = $(this).scrollTop();
     var $image_animation = $('.image_animation');
     var element_top = $image_animation.offset().top;
     if (sctop > element_top) {
         $image_animation.removeClass('on');
         $image_animation[0].offsetWidth = $image_animation[0].offsetWidth;
         $image_animation.addClass('off');
     } else {
         $image_animation.removeClass('off');
         $image_animation[0].offsetWidth = $image_animation[0].offsetWidth;
         $image_animation.addClass('on');
     }
 });

我还更改了0％关键帧以使动画看起来更好

0% {
    transform: scale(1, 1) translate3d(0, 0, 0); 
    -webkit-filter: brightness(1);
    filter: brightness(1);
    opacity: 1;
}

请注意,比例现在是(1,1),因此反向看起来更好.

offsetWidth行有点破解动画,因此它们没有问题发生变化.

看看吧

https://jsfiddle.net/hh7r4jes/1/

点赞