修改

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

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

P.S。我不以任何方式参与这个项目。我只是这个图书馆的忠实粉丝，并且只要我专业编码，就一直在我的项目中使用它。：）

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时有没有办法产生过渡效果？

3 个答案:

修改