Javascript 在更改innerHTML时，是否有任何方法可以产生转换效果？_Javascript_Html_Transition

Javascript 在更改innerHTML时，是否有任何方法可以产生转换效果？

javascript html

Javascript 在更改innerHTML时，是否有任何方法可以产生转换效果？,javascript,html,transition,Javascript,Html,Transition,我试图在项目之间切换时添加过渡效果。这段代码目前可以工作，但我更希望在切换项目时有一种淡入淡出的效果。这可能吗如果有帮助的话。谢谢我的代码： HTML 对于我来说，这似乎是一个非常好的机会，可以向大家展示非常棒的（简而言之，GSAP） GSAP无疑是Flash和JavaScript开发人员最受尊敬的动画平台。有关此工具集的更多信息，请访问他们的网站关于代码。假设您已在HTML中添加： var objectsToAnimate=[projName, projDescr, projImg];

我试图在项目之间切换时添加过渡效果。这段代码目前可以工作，但我更希望在切换项目时有一种淡入淡出的效果。这可能吗

如果有帮助的话。谢谢

我的代码：

HTML

对于我来说，这似乎是一个非常好的机会，可以向大家展示非常棒的（简而言之，GSAP）

GSAP无疑是Flash和JavaScript开发人员最受尊敬的动画平台。有关此工具集的更多信息，请访问他们的网站

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

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

看看这个，我从你的叉子上叉下来的

另外，我与这个项目没有任何关系。我只是这个库的忠实粉丝，在我的项目中使用它已经有很长一段时间了，因为我一直在专业地编写代码。：）

您可以使用。首先将字段的不透明度设置为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>

之后：

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

您可以在这里尝试：

编辑

带有CSS类的版本：

这是一个不使用包装的答案。假设我必须将元素替换为repID和pagID，其中repID元素变暗0.5秒，paid元素变不透明0.5秒，那么可以使用CSS中的以下代码来完成

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

下面是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;
});

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

根据转换类型和转换的复杂程度，您可能需要有一个“屏幕外”缓冲区div，以便在内容之间切换以实现此目的。即同时淡入和淡出，可能需要两个重叠的div（绝对位于彼此上方），其中一个位于不透明度1，另一个位于不透明度0，作为过渡，向不可见div注入新内容，然后在可见div上设置淡出过渡，在不可见div上设置淡入，您的代码需要跟踪哪个是哪个，因为您将在两者之间切换。@JimmyChandra谢谢！我很可能会听从你的建议，使用淡出和淡出分区。很酷的解决方案！但是，我宁愿在没有任何其他库/框架的情况下尝试这样做。感谢您抽出时间回答！我明白，不用担心。不过有一条评论，您可能希望对您的

projImg

图像标记进行

style

更改，因为我认为它不需要在每次单击时反复应用。你明白我的建议吗？是的，很有道理！当我测试它的时候，只剩下一些草率的代码，我将把它移到CSS文件中：感谢花时间回答！然而，这段代码似乎仍然没有淡入淡出的效果？我很可能会像JimmyChandra说的那样，两个使用两个div，然后使用JS和css转换，使fadeIn中的内容随着fadeOut中的内容消失而出现。哎呀！我有一个拼写错误，忘了包含等待函数。不可能看到更改，因为我们在隐藏它之后刚刚将不透明度设置为1。我已经更新了更改，您可以在这里尝试：不需要使用两个div。只需在短时间延迟后将不透明度设置回1（1ms应该足够了）：

setTimeout（function（）{project.style.opacity=1}，1）。不过，我建议改用类，并将所有样式保留在CSS中。谢谢阿尔瓦罗，这真的很有帮助！感谢@powerbuoy的提示，我将创建fadeIn和fadeOut类，并将它们添加到类列表中，而不是在JS中更改样式。@Ilvaroreness，快速提问-有没有一种方法可以使用类来做与您相同的事情？它似乎只适用于我的第一个项目切换。
#repIdName{
transition: opacity .5s ease-in-out;}

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

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