Fade-in fade-out css only

Я пытаюсь создать эффект постепенного выцветания для применения при загрузке страницы и при выходе из страницы ... Но мне нужно использовать только css.
Мой босс хочет этого эффекта, но я не хочу использовать javascript (я боюсь, что он не всегда будет работать, и он не работает должным образом ...) javascript для этого эффекта, это кто-нибудь знает как это сделать, используя только css?Fade-in fade-out css only

<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>

источник

2015-08-06 André Mata

Если я понимаю, что jQuery правильно, кажется, что вы исчезаете, а затем перенаправляетесь по щелчку ссылки. Этот эффект, который, как я думаю, невозможен с помощью CSS. Вам все равно понадобится JS, чтобы узнать, когда переход завершается, а затем перенаправляется. – Harry

страница исчезает при загрузке и исчезает, когда я нажимаю ссылку с классом = «ссылка» ... –

@ AndréMata Что ** Гарри ** пытается сказать вам, что если вы сделаете это в CSS, эффект затухания нагрузки будет работать, но при нажатии кнопки он будет мгновенно перенаправлять вас, независимо от того, какой эффект CSS вы настроили, чтобы вы не смогли увидеть эффект постепенного исчезновения при выходе из страницы и для этого ** Гарри ** настаивал на использовании JQuery для выполнения этой задачи. –

Я думаю, что единственная возможность - применить переход 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>

источник

2015-08-06 16:52:26 cesare

ответ

Смежные вопросы