Я пытаюсь добавить эффект перехода при переключении между проектами. Этот код в настоящее время работает, но я бы предпочел что-то вроде эффекта затухания при переключении проектов. Это возможно?Есть ли способ иметь эффект перехода при изменении innerHTML?

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

источник

2015-04-15 saadq

В зависимости от типа перехода и того, насколько он сложный, вам может потребоваться «внеэкранный» буферный div, который вы переключаете между контентом для достижения этого. То есть, исчезают и исчезают одновременно, возможно, требуется 2 перекрывающиеся div (расположены по вертикали друг от друга), где один имеет непрозрачность 1, а другой - непрозрачность 0 и как переход, вводит новый контент в невидимый div и затем , установите постепенный переход на видимый div и затухают в невидимом div, и ваш код должен отслеживать, какой из них находится, поскольку вы будете переключаться между ними. –

@JimmyChandra Спасибо! Я, скорее всего, буду следовать вашим советам и использовать fadeOut и fadeIn div. – saadq

Вы можете легко сделать это, используя 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/

EDIT

Версия с классами CSS: https://jsfiddle.net/y4p1y0ch/

источник

2015-04-15 05:11:19

Спасибо, что нашли время ответить! Однако, похоже, этот код по-прежнему не имеет эффекта затухания? Я, скорее всего, буду делать то, что сказал ДжиммиЧандра, который два использует два div друг на друга, а затем использует переходы JS и css, чтобы сделать контент в fadeIn, поскольку содержимое в fadeOut исчезает. – saadq

Ops! У меня была одна орфографическая ошибка, и я забыл включить функцию ожидания. Невозможно было увидеть изменения, потому что мы устанавливали непрозрачность сразу после его скрытия. Я обновил изменения, и вы можете попробовать его здесь: https://jsfiddle.net/9c4mx7p9/ –

Не нужно использовать два div. Просто установите непрозрачность до 1 после короткой задержки (1 мс должно быть достаточно): 'setTimeout (function() {project.style.opacity = 1}, 1);'. Я бы рекомендовал использовать класс вместо этого и сохранить все стили в CSS. – powerbuoy

Это похоже на большую возможность для меня, чтобы представить вам когда-нибудь удивительный GreenSock Animation Platform (или GSAP короче).

GSAP, возможно, является самой уважаемой анимационной платформой для разработчиков Flash и JavaScript. Перейдите на их сайт для получения дополнительной информации об этом наборе инструментов.

О к кодам. Предполагая, что вы добавили TweenMax в вашем 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}); 
    }}); 
});

Взгляните на эту jsFiddle я раздвоенной от вашего.

P.S. Я никак не связан с этим проектом. Я просто большой поклонник этой библиотеки и использую ее в своих проектах до тех пор, пока я профессионально кодирую. :)

источник

2015-04-15 04:56:08

Прохладный раствор! Однако я бы предпочел попробовать это без каких-либо других библиотек/фреймворков. Спасибо, что нашли время ответить! – saadq

Понимаю, не беспокойтесь. Один комментарий, однако, вы можете захотеть перенести изменения 'style' в свой тэг' projImg' _image_, потому что я думаю, что его не нужно применять снова и снова при каждом нажатии. Вы видите, что я предлагаю? –

Да, хороший момент! Просто немного неаккуратного кода, когда я его тестировал, я собираюсь переместить его в файл CSS: p – saadq

Это ответ без упаковки , Предположим, что мне нужно заменить элемент repID на pagID, где элемент repID dims для 0.5sec, а элемент 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)">

источник

2018-01-02 12:47:35 Harsha

Есть ли способ иметь эффект перехода при изменении innerHTML?

ответ

EDIT

Смежные вопросы