那些遇到过的问题

普通的JavaScript触发器CSS淡出，ajax加载内容，使用CSS淡入

dro*_*ooh 6 html javascript css ajax jquery

试图弄清楚如何使用普通的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);
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

data1.php和data2.php的内容仅出于测试目的而用lorem ipsum填充，在生产中，它们将是cms的界面屏幕。

这是一个jsfiddle https://jsfiddle.net/nomadwebdesign/cfvd6uk4/

查看Dan Dascalescu的答案以及如何扩展此方法如何使用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;
}
Run Code Online (Sandbox Code Playgroud)

仍在寻找使用jQuery而不使用香草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);
};
Run Code Online (Sandbox Code Playgroud)

此过程中的主要键之一是为Transitionend创建一个事件侦听器，然后删除该事件侦听器（在第二个Transition触发时重复该功能）

在此处输入图片说明

Kal*_*mah 7

您可以通过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);
}
Run Code Online (Sandbox Code Playgroud) 
#dataContent {
  opacity: 0;
  transition: opacity .400s;
}

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

#dataContent[data-hascontent='true'].fade {
  opacity: 0;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

dro*_*ooh 0 

<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>
Run Code Online (Sandbox Code Playgroud)

此过程的主要关键之一是为Transitionend创建一个事件侦听器，然后删除该事件侦听器（在第二个转换触发时重复该函数）。

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

归档时间：

查看次数：

334 次

最近记录：

6 年 前
CSS3转换完成后回调 199
如何使用JavaScript和CSS进行淡入和淡出 53
更多相关链接
相关归档
Twitter引导下拉列表在屏幕外 139
使用Javascript发送电子邮件 105
如何在vue.js webpack项目中正确设置favicon.ico？ 84
在HTML页面中显示XML内容 54
将逗号分隔的输入框值拆分为jquery中的数组,并循环遍历它 35
记录或记录所有浏览器DOM/JQuery事件 26
如何在对话框显示中将回调附加到jquery效果？ 25
默认CSS覆盖媒体查询 22
CSS - 基于Web的编辑器的字体 20
如何使用Jquery AJAX发布多维数组？ 9
难疑归档
什么是Python中的元类？ 5409
Docker与虚拟机有何不同？ 3523
我应该在MySQL中使用日期时间或时间戳数据类型吗？ 2598
在git中推送提交时,src refspec master与any不匹配 2472
迭代字典的最佳方法是什么？ 2455
为什么我不应该在PHP中使用mysql_*函数？ 2432
SQL Server中的LEFT JOIN与LEFT OUTER JOIN 1514
你如何重命名Git标签？ 1162
如何向给定元素添加类？ 1109
我如何修剪空白？ 1035