只有渐入渐出css

我正在尝试创建一个淡入淡出效果应用于页面加载和离开页面时…但我需要它只使用css。
我的老板想要这个效果，但我不想使用javascript(我担心它不会总是工作，而且它不能正常工作…)这个效果的javascript是这样的，有人知道怎么只用css实现吗?

<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
$(".link").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("body").fadeOut(1000, redirectPage);      
});
function redirectPage() {
    window.location = linkLocation;
}
});
</script>

我认为唯一的可能性是通过body类应用css过渡。

<style>
body.hide{
 opacity: 0;
}
body.hidefast { 
  transition:All 1s ease;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  opacity: 0; 
}
body { 
  transition:All 2s ease;
  -webkit-transition:All 2s ease;
  -moz-transition:All 2s ease;
  -o-transition:All 2s ease;
  opacity: 1;
}
</style>
<body class="hide">
   content content
   <a class="link" href="http://http://stackoverflow.com/">LINK</a>
   <script type="text/javascript">
 var linklocation;
 $(document).ready(function() {
  //$("body").css("display", "none");
  //$("body").fadeIn(2000);
  $("body").removeClass("hide");
 $(".link").click(function(event){
    event.preventDefault();
   linkLocation = this.href;
   //$("body").fadeOut(1000, redirectPage);      
    $("body").addClass("hidefast");
    setTimeout(redirectPage, 1000);
});
function redirectPage() {
   window.location = linkLocation;
 }
});
</script>
</body>

相关内容

最新更新

热门标签：