有什么方法可以在改变innerHTML时产生过渡效果吗？

Question

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

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

Answer 1

这对我来说似乎是一个很好的机会，可以向您展示令人敬畏的 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 我从你那里分叉出来的。

P.S。我不以任何方式隶属于这个项目。我只是这个库的忠实粉丝，从我从事专业编码以来就一直在我的项目中使用它。 :)

Answer 2

您可以使用 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/

Answer 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)">

有什么方法可以在改变innerHTML时产生过渡效果吗？

Is there any way to have a transition effect when changing the innerHTML?

html

javascript

transition

编辑