使用CSS实现开关动画 - 更好的开启动画

Question

使用CSS实现开关动画 - 更好的开启动画

4

我正在使用这里的开关式监视器效果进行尝试，尽管我的动画不是在开关上，而是在窗口滚动时。我已经按照以下方式设置：

$(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那样复杂的东西，淡入就足够了。我尝试添加 on 类，并使用它来启动某种css变化，但没有成功。我还尝试了动画，但也不起作用。目前我的图片只是出现了，这有点糟糕。有什么办法可以在向后滚动时进行过渡吗？

- dingo_d

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DGS · Accepted Answer

添加额外的样式来添加.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/