javascript - 普通javascript触发css淡出，ajax加载内容，使用CSS淡入

Question

试图找出如何使用纯 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/

看看 Dan Dascalescu 的答案以及如何对此进行扩展 How to do fade-in and fade-out with JavaScript and CSS

我也一直在尝试使用 on('transitionend') 事件监听器，但是它会进入循环，因为在通过 ajax 加载后，我删除了导致再次转换的 css 类。

我可以通过使用 setTimeout 并匹配过渡持续时间来做到这一点，但这看起来很不稳定。

此时我只想知道如何使用 jQuery 和 CSS 而不使用 fadeIn() 和 来做到这一点淡出()

顺序是单击 -> 淡出以前的内容 -> 淡入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;
}

仍在寻找使用普通 javaScript 的不使用 jQuery 的解决方案

引用这些帖子寻求帮助

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 创建一个事件监听器，然后删除该事件监听器(在第二个转换触发时重复该功能)

Answer 1

您可以使用 fetch API 使用更简单且现代的 ajax 方法。此外，结合使用 data-* 属性和 CSS 可以简化淡入和淡出。

举个例子:

var classname = document.getElementsByClassName('clicker');
let dataContent = document.getElementById("dataContent");

/*
 * Manage transtion in and out in sucess and error callback
 */
function transition(content) {
  dataContent.classList.add("fade");

  var clickFunction = function(event) {
    dataContent.innerHTML = content;
    dataContent.classList.remove("fade");
  };

  dataContent.addEventListener("transitionend", clickFunction);

  return true;
}

// Main function, to call fetch
function ajaxf() {
  var datafile = this.getAttribute('data-file');
  var opts = {
    method: 'GET'
  };


  fetch(datafile, opts).then(function(response) {
      /* If we dont get an OK response (200) then through an error to
       trigger catch callback
       */
      if (response.status !== 200)
        throw new Error("Not 200 response")

      /* Parse response to json. You can use text() as well
       *	https://developer.mozilla.org/en-US/docs/Web/API/Body
       */
      return response.json();
    })
    .then(function(content) {
      // check if content has been set previously
      let hasContent = dataContent.getAttribute("data-hascontent");

      if (hasContent != 'false')
        return transition(content.body);

      // Process empty div
      dataContent.innerHTML = content.body;
      dataContent.setAttribute("data-hascontent", "true");

    }).catch(function(error) {
      // Same as previous methid
      let hasContent = dataContent.getAttribute("data-hascontent");

      if (hasContent != 'false')
        return transition(error);

      dataContent.innerHTML = error;
      dataContent.setAttribute("data-hascontent", "true");
    });
}

// Attach Events
for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener('click', ajaxf, false);
}

#dataContent {
  opacity: 0;
  transition: opacity .400s;
}

#dataContent[data-hascontent='true'] {
  opacity: 1;
}

#dataContent[data-hascontent='true'].fade {
  opacity: 0;
}

<section id="section">
  <a href="#" class="clicker" data-file="https://jsonplaceholder.typicode.com/posts/1">Load data 1</a>
  <a href="#" class="clicker" data-file="data2">Load data 2</a>
  <a href="#" class="clicker" data-file="https://jsonplaceholder.typicode.com/posts/5">Load data 3</a>
  <div id="dataContent" data-hascontent='false'></div>
</section>