Пытаясь выяснить, как это сделать с помощью простого javascript и css, ниже приведен код, работающий с jquery.
В этом примере пользователь нажимает ссылку, скрипт проверяет, есть ли содержимое вdiv, если есть, затухает содержимое, затем загружает ajax новое содержимое и добавляет его.
Я знаю, что могу переключать класс css, но мне интересно, как это сделать, используя обратный вызов , чтобы увидеть, когда анимация css завершена, чтобы можно было запустить запрос ajax и затем добавить его.
<section>
<a href="#" data-file="data1">Load data 1</a>
<a href="#" data-file="data2">Load data 2</a>
<div id="content"></div>
</section>
$(document).ready(function(){
$('body').on('click','a',function(event){
event.preventDefault();
var datafile = $(this).data('file');
console.log(datafile);
if($('#content').html().length){
$('#content').fadeOut(700,function(){
$('#content').load(datafile + '.php').hide().fadeIn(700);
console.log('has content, fadeout then load fadein ' + datafile);
})
} else {
$('#content').load(datafile + '.php').hide().fadeIn(700);
console.log('no content, load fadein ' + datafile);
}
});
});
содержимое data1.php и data2.php заполнены lorem ipsum только для целей тестирования, в производстве они будут интерфейсными экранами для cms.
вот jsfiddle https://jsfiddle.net/nomadwebdesign/cfvd6uk4/
Глядя на ответ Дана Даскалескуи как расширить этот Как делать постепенное исчезновение и исчезновение с помощью JavaScript и CSS
Я также пытался использовать прослушиватель событий on ('transitionend'),Однако это входит в цикл, потому что послезагрузка через ajax Я удаляю класс css, вызывающий переход снова.
Я могу сделать это, используя setTimeout и сопоставляя длительность перехода, однако это кажется ненадежным.
На этом этапе я бы простохотелось бы узнать, как это сделать с jQuery и CSS без использования fadeIn () и fadeOut ()
последовательность щелкает -> исчезает предыдущее содержимое -> исчезает в загруженном содержимом ajax
ОБНОВЛЕНИЕ Вот рабочее решение, использующее jQuery без fadeIn () или fadeOut () но с непрозрачным переходом CSS
<section id="section2">
<a href="#" data-file="data1">Load data 1</a>
<a href="#" data-file="data2">Load data 2</a>
<div id="dataContent"></div>
</section>
$(document).ready(function(){
$('body').on('click','#section2 a',function(event){
event.preventDefault();
var datafile = $(this).data('file');
var dataContent = $('#dataContent');
// if there is content fade it out first
if(dataContent.html().length){
dataContent.addClass('opa fade');
// check for completed transition
dataContent.one('transitionend', function(){
dataContent.load(datafile + '.php', function(){
dataContent.removeClass('fade');
});
});
} else {
// if there is no content just load and fade in
dataContent.addClass('fade');
dataContent.load(datafile + '.php', function(){
dataContent.removeClass('fade');
dataContent.addClass('opa');
});
}
});
});
#dataContent.opa {
opacity: 1;
transition: opacity .700s;
}
#dataContent.fade {
opacity: 0;
}
Все еще ищите решение для этого без jQuery , используя vanilla javaScript
, ссылаясь на эти сообщения для справки
https://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end
https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/
После целого дня вдумчивого исследования этого и извлечения всего, что я мог найти из Интернета, у меня есть рабочее решение. Это пример использования простых ванильных JavaScript Ajax и CSS3 переходов . Я считаю, что это стало популярной тенденцией в последние несколько лет (2017-2019), так как браузеры продвинулись, старые браузеры перестали работать. Кроме того, с учетом зависимости от jQuery все меньше и больше кажется, что все больше людей ищут простые версии js и используют переходы и анимацию css3. Я полагаю, что этот вопрос и ответ будут более подробными, чем другие, связанные здесь с помощью stackoverflow, и полагаю, что этот пример будет полезен многим другим.
Вот рабочее решение
css
#dataContent.opa {
opacity: 1;
transition: opacity .400s;
}
#dataContent.fade {
opacity: 0;
}
html
<section id="section">
<a href="#" class="clicker" data-file="data1">Load data 1</a>
<a href="#" class="clicker" data-file="data2">Load data 2</a>
<a href="#" class="clicker" data-file="data3">Load data 3</a>
<div id="dataContent"></div>
</section>
var classname = document.getElementsByClassName('clicker');
ajaxf = function(event){
var xhttp = new XMLHttpRequest();
event.preventDefault();
var datafile = this.getAttribute('data-file');
var dataContent = document.getElementById('dataContent');
if(dataContent.innerHTML.length){
dataContent.classList.add('opa','fade');
dataContent.addEventListener('transitionend',handler);
function handler(event) {
event.target.removeEventListener(event.type,arguments.callee);
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
dataContent.innerHTML = this.responseText;
dataContent.classList.remove('fade');
};
if(this.status == 404){
dataContent.classList.remove('fade');
dataContent.innerHTML = 'there was an error retrieving data';
}
};
xhttp.open('GET',datafile + '.php',true);
xhttp.send();
}
} else {
dataContent.classList.add('fade');
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
dataContent.innerHTML = this.responseText;
dataContent.classList.remove('fade');
dataContent.classList.add('opa');
};
if(this.status == 404){
dataContent.innerHTML = 'there was an error retrieving data';
dataContent.classList.remove('fade');
dataContent.classList.add('opa');
}
};
xhttp.open('GET',datafile + '.php',true);
xhttp.send();
}
};
for(var i = 0; i < classname.length; i++){
classname[i].addEventListener('click',ajaxf,false);
};
Одним из главных ключей в этом процессе является создание прослушивателя событий для transitionend , а затем удаление прослушивателя событий (для повторения функции при запуске второго перехода)
