jquery - jQuery 的 CSS 技巧

Question

今天是愚人节，我想用 CSS3 模糊来欺骗我的访客。模糊应持续 2 秒，并在 1 秒内恢复正常。

但问题是我的代码没有按预期执行。
页面现在显示:加载 > 模糊 > 正常 > 模糊
预期页面:已加载 > 模糊 > 正常 > 模糊

片段:

$(document).ready(function() {
    $(".apffilter").addClass("animae");
    
    window.setTimeout(function(){
        $(".apffilter").removeClass("animae");
   }, 3000);
});

.apffilter {
  filter:blur(1px);
  -webkit-filter:blur(1px);
  -moz-filter:blur(1px);
  -o-filter:blur(1px);
  -ms-filter:blur(1px);
    
  -webkit-transition: all 2.0s linear 1.0s;
  -moz-transition: all 2.0s linear 1.0s;
  -ms-transition: all 2.0s linear 1.0s;
  -o-transition: all 2.0s linear 1.0s;
  transition: all 2.0s linear 1.0s;
}

.apffilter.animae {
   filter:blur(0px);
  -webkit-filter:blur(0px);
  -moz-filter:blur(0px);
  -o-filter:blur(0px);
  -ms-filter:blur(0px);
}

<div class="apffilter">
    <img src="http://www.etnforum.com/templates/thewei-zz3/images/etnDiamond2015.png" /><br /><br />
    Happy April Fool's Day!
</div>

Answer 1

见下文，您只将模糊添加到 .animae 类，而不是 .appfilter 类，我把它留在那里是为了表明它应该只被使用重置模糊

Click here to see a fiddle of it in action

$(document).ready(function() {
    $(".apffilter").addClass("animae");
    
    window.setTimeout(function(){
        $(".apffilter").removeClass("animae");
   }, 3000);
});

.apffilter {
  filter:blur(0px);
  -webkit-filter:blur(0px);
  -moz-filter:blur(0px);
  -o-filter:blur(0px);
  -ms-filter:blur(0px);
    
  -webkit-transition: all 2.0s linear 1.0s;
  -moz-transition: all 2.0s linear 1.0s;
  -ms-transition: all 2.0s linear 1.0s;
  -o-transition: all 2.0s linear 1.0s;
  transition: all 2.0s linear 1.0s;
}

.apffilter.animae {
   filter:blur(1px);
  -webkit-filter:blur(1px);
  -moz-filter:blur(1px);
  -o-filter:blur(1px);
  -ms-filter:blur(1px);
}

<div class="apffilter">
    <img src="http://www.etnforum.com/templates/thewei-zz3/images/etnDiamond2015.png" /><br /><br />
    Happy April Fool's Day!
</div>