Question

我试图使用一些标准的jQuery和CSS来让图像淡入，但是在摆弄不透明度之后，似乎如果我在css中将不透明度设置为0，那么图像将在动画期间重新出现，然后消失一旦它完成了。有什么提示吗？

这是代码：

的jQuery

<script>
$(window).scroll(function() {
    $("#me").each(function(){
    var imagePos = $(this).offset().top;
    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+650) {
            $(this).addClass("fadeIn");
        }
    });
});
</script>

CSS

@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        transform: scale(1.1);  
    }
    80% {
        transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        transform: scale(1);
        opacity: 1; 
    }       
}

Answer 1

以下是您可以继续的方式：

DEMO

<强> CSS

@-webkit-keyframes fadeIn {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        -webkit-transform: scale(1.1);  
    }
    80% {
        -webkit-transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        -webkit-transform: scale(1);
        opacity: 0; 
    }       
}
@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        transform: scale(1.1);  
    }
    80% {
        transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        transform: scale(1);
        opacity: 0; 
    }       
}

.fadeIn {
  -webkit-animation: fadeIn 3s;
          animation: fadeIn 3s;
}

.me {
  width: 100px;
  height: 100px;
  background: red;
  opacity: 0;
}

<强> HTML

<button id="toggle-button">Toggle</button>
<div id="me" class="me"></div>

<强>的JavaScript

$('#toggle-button').click(function () {
  var el = document.getElementById('me');
  el.classList.add('fadeIn');
  $(el).bind('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
    function(e) {
    this.classList.remove('fadeIn');
  });
});

图像在淡入之前出现

1 个答案: