【问题标题】：Is there any way to have a transition effect when changing the innerHTML?更改innerHTML时有什么办法可以产生过渡效果吗？
【发布时间】：2015-06-20 20:08:06
【问题描述】：

我正在尝试在项目之间切换时添加过渡效果。此代码当前有效，但我宁愿在切换项目时使用淡入淡出效果。这可能吗？

Here is a jsfiddle 如果有帮助的话。谢谢！

我的代码：

HTML

<body>
  <div id="proj_name"></div>
  <div id="proj_description"></div>
  <img id="proj_img" src=""><br>
  <button id="proj_switcher">Next Project</button>
</body>

JavaScript

/**
 * Constructor function for Projects
 */
function Project(name, description, img) {
  this.name = name;
  this.description = description;
  this.img = img;
}

// An array containing all the projects with their information
var projects = [
  new Project('Project 1', 'Project 1 Description', 'http://bit.ly/1E0IzpX'),
  new Project('Project 2', 'Project 2 Description', 'http://bit.ly/1FHLGOt'),
  new Project('Project 3', 'Project 3 Description', 'http://bit.ly/1H5wRt7'),
  new Project('Project 4', 'Project 4 Description', 'http://bit.ly/1ECIQht'),
  new Project('Project 5', 'Project 5 Description', 'http://bit.ly/1CYeY9F')
];

// Cacheing HTML elements
var projName   = document.querySelector('#proj_name');
var projDescr  = document.querySelector('#proj_description');
var projImg    = document.querySelector('#proj_img');
var projButton = document.querySelector('#proj_switcher');

// Index of the current project being displayed
var projIndex = 0;

projButton.addEventListener('click', function() {
  projName.innerHTML = projects[projIndex].name;
  projDescr.innerHTML = projects[projIndex].description;
  projImg.src = projects[projIndex].img;
  projImg.style.width = '250px';
  projImg.style.height = '150px';

  projIndex = (projIndex + 1) % projects.length;
});

【问题讨论】：

根据过渡类型及其复杂程度，您可能需要在内容之间切换的“屏幕外”缓冲区 div 才能实现此目的。即同时淡入和淡出，可能需要2个重叠的div（彼此绝对放置），其中一个处于不透明度1，另一个处于不透明度0，作为过渡，将新内容注入不可见的div，然后，在可见 div 上设置淡出过渡并在不可见 div 上淡入，并且您的代码需要跟踪哪个是哪个，因为您将在两者之间切换。
@JimmyChandra 谢谢！我很可能会听从您的建议并使用淡出和淡入 div。

标签： javascript html transition

【解决方案1】：

您可以使用CSS transition 轻松做到这一点。首先将字段的不透明度设置为 0，然后替换内容并使字段再次出现。

为此，首先包装项目字段：

<body>
  <div id="project"></div>
     <div id="proj_name"></div>
     <div id="proj_description"></div>
     <img id="proj_img" src=""><br>
  </div>
  <button id="proj_switcher">Next Project</button>
</body>

添加以下 CSS 代码：

<style>
#project {
   -webkit-transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -ms-transition: opacity .5s ease-in-out;
   -o-transition: opacity .5s ease-in-out;
   transition: opacity .5s ease-in-out;
}
</style>

然后，在更改之前添加：

var project = document.querySelector('#project');
project.style.opacity = 0;

然后：

project.style.opacity = 1;

最终的 javascript 将是：

/**
 * Constructor function for Projects
 */
function Project(name, description, img) {
  this.name = name;
  this.description = description;
  this.img = img;
}

// An array containing all the projects with their information
var projects = [
  new Project('Project 1', 'Project 1 Description', 'http://bit.ly/1E0IzpX'),
  new Project('Project 2', 'Project 2 Description', 'http://bit.ly/1FHLGOt'),
  new Project('Project 3', 'Project 3 Description', 'http://bit.ly/1H5wRt7'),
  new Project('Project 4', 'Project 4 Description', 'http://bit.ly/1ECIQht'),
  new Project('Project 5', 'Project 5 Description', 'http://bit.ly/1CYeY9F')
];

// Cacheing HTML elements
var project = document.querySelector('#project');
var projName   = document.querySelector('#proj_name');
var projDescr  = document.querySelector('#proj_description');
var projImg    = document.querySelector('#proj_img');
var projButton = document.querySelector('#proj_switcher');

// Index of the current project being displayed
var projIndex = 0;

projButton.addEventListener('click', function() {
  // Fade out
  project.style.opacity = 0;

  // Wait for the transition 
  setTimeout(function(){ 
      // Load new content
      projName.innerHTML = projects[projIndex].name;
      projDescr.innerHTML = projects[projIndex].description;
      projImg.src = projects[projIndex].img;
      projImg.style.width = '250px';
      projImg.style.height = '150px';
      projIndex = (projIndex + 1) % projects.length;
      // Fade in
      project.style.opacity = 1;
  },500);
});

你可以在这里试试：https://jsfiddle.net/9c4mx7p9/

编辑

带有 CSS 类的版本：https://jsfiddle.net/y4p1y0ch/

【讨论】：

感谢您抽出宝贵时间回答！但是，似乎这段代码仍然没有淡入淡出效果？我很可能会按照 JimmyChandra 所说的那样做，即两个使用两个 div 相互叠加，然后使用 JS 和 css 过渡使fadeIn 中的内容随着fadeOut 中的内容消失而出现。
操作！我有一个拼写错误，我忘了包括等待功能。无法看到更改，因为我们在隐藏后将不透明度设置为 1。我已经更新了改动，你可以在这里试试：jsfiddle.net/9c4mx7p9
不需要使用两个div。只需在短暂延迟后将不透明度设置回 1（1ms 应该足够了）：setTimeout(function () { project.style.opacity = 1 }, 1);。我建议改用一个类，并将所有样式保留在 CSS 中。
感谢 Álvaro，这真的很有帮助！感谢@powerbuoy 的提示，我将创建fadeIn 和fadeOut 类并将它们添加到类列表中，而不是更改JS 中的样式。
@ÁlvaroReneses，快速提问 - 有没有办法使用类来做同样的事情？它似乎只适用于我的第一个项目切换。 jsfiddle.net/9c4mx7p9/1

【解决方案2】：

这对我来说似乎是一个绝佳的机会，可以向您展示非常棒的 GreenSock Animation Platform（或简称为 GSAP）。

GSAP 可以说是最受 Flash 和 JavaScript 开发人员欢迎的动画平台。前往他们的网站了解有关此工具集的更多信息。

关于代码。假设您在 HTML 中添加了TweenMax：

var objectsToAnimate=[projName, projDescr, projImg];
var duration=.4;

projImg.style.width = '250px';
projImg.style.height = '150px';

projButton.addEventListener('click', function() {
    TweenMax.to(objectsToAnimate, duration, {opacity:0, ease:Power4.easeIn, onComplete:function(){
        projName.innerHTML = projects[projIndex].name;
        projDescr.innerHTML = projects[projIndex].description;
        projImg.src = projects[projIndex].img;        
        projIndex = (projIndex + 1) % projects.length;
        TweenMax.to(objectsToAnimate, duration, {opacity:1, ease:Power4.easeOut});
    }});
});

看看这个jsFiddle我从你那里分叉出来的。

附：我与这个项目没有任何关系。我只是这个库的忠实粉丝，只要我专业编码，我就一直在我的项目中使用它。 :)

【讨论】：

很酷的解决方案！但是，我宁愿在没有任何其他库/框架的情况下尝试这样做。感谢您抽出宝贵时间回答！
我明白，不用担心。不过，有一条评论，您可能希望将style 更改为您的projImg image 标签，因为我认为它不需要在每次点击时一遍又一遍地应用。你明白我的建议了吗？
是的，好点子！当我测试它时，只是一些草率的遗留代码，我将把它移到 CSS 文件中：p

【解决方案3】：

这是一个不使用包装的答案。假设我必须用 pagID 替换带有 repID 的元素，其中 repID 元素会变暗 0.5 秒，而 padID 元素会在接下来的 0.5 秒内变得不透明，那么可以使用 CSS 中的以下代码来完成，

#repIdName{
transition: opacity .5s ease-in-out;}

以及 JavaScript 中的以下内容

function replaceID(repId,pagID){
var mainContent = document.getElementById(repID);
var homeContent = document.getElementById(pagID).innerHTML;
mainContent.style.opacity = 0;
window.setTimeout(function () {
                                mainContent.innerHTML = homeContent;
                                console.log(pagID+"opened");
                                mainContent.style.opacity = 1;
                                },500);}

在 HTML 中，函数调用有点像这样

<a href="#"onclick="replaceID('repIdName','pagIdName)">

【讨论】：