web-dev-qa-db-ja.com

innerHTMLを変更するときにトランジション効果を持たせる方法はありますか？

プロジェクトを切り替えるときにトランジション効果を追加しようとしています。このコードは現在機能しますが、プロジェクトを切り替えるときにフェード効果を持たせたいと思います。これは可能ですか？

ここに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;
});
javascripthtmltransition
10
saadq

CSS遷移 を使用して簡単に行うことができます。最初にフィールドの不透明度を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/

11
Álvaro Reneses

これはラッピングを使わない答えです。要素をrepIDとpagIDに置き換える必要があるとします。ここで、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)">
0
Harsha

これは、これまでにない素晴らしいものを紹介する絶好の機会のようです GreenSock Animation Platform （または[〜＃〜] gsap [〜＃〜]要するに）。

GSAPは、間違いなく、Flash開発者とJavaScript開発者の両方にとって最も尊敬されているアニメーションプラットフォームです。このツールセットの詳細については、Webサイトにアクセスしてください。

コードについて。 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.私はこのプロジェクトとは一切関係がありません。私はこのライブラリの大ファンであり、プロのコーディングをしている限り、プロジェクトで使用しています。 :)

0
Tahir Ahmed