Переход между pageloads

Question

Я хочу иметь эффекты перехода между pageloads как слайд, вращать, исчезать и т. Д. Я пытаюсь выполнить это с помощью следующего кода, но он не работает. Есть идеи?

$("asp:HyperLink.smoothlink").click(function (e) { 
    $("body").addclass("fadeout"); 

    setTimeOut(function() { 
     window.location = e.currentTarget.attributes['data-url'].value; 
    },1000); 
} 

CSS

.fadeout 
{ 
    opacity:0; 
    transition :opacity 1s ease-in-out; 
    -moz-transition-opacity 1s ease-in-out; 
    -webkit-transition:opacity 1s ease-in-out; 
} 

Answer 1

Насколько я понимаю, вы пытаетесь добавить анимацию на текущей странице при нажатии на конкретную ссылку. Создается впечатление, что вы работаете в среде .NET, и я не слишком хорошо знаком с его WebControls, однако несколько ошибок выделяются:

• Вы не используете правильную строку выбора - asp:HyperLink.smoothlink. Вместо этого попробуйте использовать a.smoothlink.
• JavaScript чувствителен к регистру, поэтому addclass и 'setTimeOut are causing an error. Try using 'addClass и setTimeout вместо этого.
• Вам также может потребоваться использовать атрибут href вместо data-url, но это действительно зависит от того, что является .Net-управлением.

Вот рабочий пример того, что я думаю, что вы пытаетесь сделать:

HTML:

<a href="http://stackoverflow.com" class="smoothlink">example link</a> 

CSS:

.fadeout { 
    opacity:0; 
    transition :opacity 1s ease-in-out; 
    -moz-transition-opacity 1s ease-in-out; 
    -webkit-transition:opacity 1s ease-in-out; 
} 

JavaScript:

$(document).ready(function() { 
    $("a.smoothlink").click(function (event) { 
     event.stopPropagation(); 
     $("body").addClass("fadeout"); 
     setTimeout(function() { 
      window.location = $(event.currentTarget).attr('href'); 
     }, 1000); 
    }); 
});