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

Posted 2023-03-06

【中文标题】普通 javascript 触发 css 淡出，ajax 加载内容，使用 CSS 淡入

【英文标题】：Plain javascript trigger css fade out, ajax load content, fade in using CSS

【发布时间】：2020-02-23 03:50:49

【问题描述】：

试图弄清楚如何使用普通的 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 并匹配转换持续时间来做到这一点，但这似乎很不稳定。

此时我只想知道如何在不使用 fadeIn() 和 的情况下使用 jQuery 和 CSS 做到这一点淡出（）

顺序是 点击 -> 淡出以前的内容 -> 淡入 ajax 加载的内容

更新 这是一个使用 jQuery 的工作解决方案，没有 fadeIn() 或 fadeOut()，但有 CSS opacity transition

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

仍在寻找使用 vanilla 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/

在花了一整天的时间仔细研究这个问题并将我可以从网上找到的所有内容汇总在一起之后，我有了一个可行的解决方案。这是一个使用 plain vanilla JavaScript Ajax 和 CSS3 过渡 的示例。我发现这是过去几年（2017-2019 年）的流行趋势，因为浏览器已经进步，而旧版浏览器已经淘汰。此外，随着对 jQuery 的依赖越来越少，似乎越来越多的人正在寻找纯 js 版本并利用 css3 过渡和动画。我相信这个问题和答案比 *** 上链接的其他问题更详细，并且相信这个示例对其他人有用。

这是可行的解决方案

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 创建一个事件侦听器，然后移除事件侦听器（以在第二个转换触发时重复该功能）

【问题讨论】：

这个问题要求普通的javascript答案，链接的问题是关于jquery的。

重新打开，您可以在下面添加您的答案。

我在下面提供了一个可行的答案，但是在 11 月 2 日，我创建了一个价值 200 的赏金以引起更多关注。

@drooh 使用 CSS 动画检查答案

【参考方案1】：

您可以用于此目的，

通过fetch()加载内容 一个简单的CSSanimation 使用animationstart,animationend 事件侦听器来操纵div.dataContent 元素的输出；

与您的方法不同是 fetch 开始于 animationstart 事件，结果附加到 @ animationend 事件时的 987654335@ 元素；

下面的示例可以用于您的onclick 逻辑。

document.querySelectorAll('#section2 a').forEach((item) => 
  item.addEventListener('click', (e) => 
    let dataFile = e.target.dataset.file, 
    dataContent = document.getElementById('dataContent'), 
    myText = null;
    dataContent.classList.add('fade');
    dataContent.addEventListener('animationstart', (ev) => 
      fetch(dataFile).then(async(response) => 
        await response.text().then(async(text) => 
          myText = await text;
        );
      ).catch(async(error) => 
        myText = await error.toString().split(': ')[1];
      );
    );
    dataContent.addEventListener('animationend', (ev) => 
      dataContent.classList.remove('fade');
      dataContent.innerHTML = myText;
    );
  );
);

#dataContent.fade 
  animation: fade .950s;


@keyframes fade 
  0% 
    opacity: 1;
  
  100% 
    opacity: 0;
  

<section id="section2">
  <a href="#" data-file="https://www.w3.org/TR/PNG/iso_8859-1.txt">Load data 1</a>
  <a href="#" data-file="http://25.io/toau/audio/sample.txt">Load data 2</a>
  <div id="dataContent">Click any of the above links to retrieve new content!</div>
</section>

编辑

同样的淡出效果可以使用：

通过fetch() 加载内容 使用transitionstart,transitionend 事件侦听器来操纵div.dataContent 元素的输出；

document.querySelectorAll('#section2 a').forEach((item) => 
  item.addEventListener('click', (e) => 
    let dataFile = e.target.dataset.file, 
    dataContent = document.getElementById('dataContent'), 
    myText = null;
    dataContent.classList.add('fade');
    dataContent.addEventListener('transitionstart', (ev) => 
      fetch(dataFile).then(async(response) => 
        await response.text().then(async(text) => 
          myText = await text;
        );
      ).catch(async(error) => 
        myText = await error.toString().split(': ')[1];
      );
    );
    dataContent.addEventListener('transitionend', (ev) => 
      dataContent.classList.remove('fade');
      dataContent.innerHTML = myText;
    );
  );
);

#dataContent.fade 
  opacity: 0;
  transition: opacity .950s;

#dataContent 
  opacity: 1;

<section id="section2">
  <a href="#" data-file="https://www.w3.org/TR/PNG/iso_8859-1.txt">Load data 1</a>
  <a href="#" data-file="http://25.io/toau/audio/sample.txt">Load data 2</a>
  <div id="dataContent">Click any of the above links to retrieve new content!</div>
</section>

【参考方案2】：

您可以使用以下网址： https://css-tricks.com/dynamic-page-replacing-content/ , 里面有一个 Demo (https://css-tricks.com/examples/DynamicPage/) 做你想做的事

编辑： 您是否尝试将类名添加到您的代码容器中并设置特定时间的动画然后删除该类名和具有类名的类名以在使用 AJAX 替换内容时隐藏内容然后删除该类并添加一个出现动画的类名？

【讨论】：

该示例使用带有淡入淡出和动画的 jquery。我的问题要求使用 css 转换的纯 JavaScript。

哦，好的，我看看我能做什么

我为我自己的问题提供了一个可行的答案，但是我正在寻找其他选项和其他人的更多输入。还有一个使用 fetch 的答案，看起来不错。

其实这个答案似乎已经足够好了。我想写一些类似的，带有 fetch 和监听转换事件。

【参考方案3】：

您可以通过 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>

【参考方案4】：

<style>
#dataContent.opa 
    opacity: 1;
    transition: opacity .400s; 

#dataContent.fade 
    opacity: 0;

</style>

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

<script>
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);
;
</script>

此过程中的一个主要关键是为 transitionend 创建一个事件侦听器，然后移除事件侦听器（以在第二个转换触发时重复该功能） .

此方法检查 div 中是否有内容，如果有，它将首先淡出该内容（使用 CSS3），然后执行 ajax 调用并淡入新内容。如果没有内容它只会通过淡入来执行 ajax 调用。