Question

我试图创建一个淡入淡出淡出效果以应用于页面加载和离开页面时...但我需要它只使用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>

Answer 1

我认为唯一的可能性是通过身体类应用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>

淡入淡出css而已

1 个答案: