Вопросы Теги

Как изменить innerhtml гладко с помощью чистого Javascript? [Дубликат]

ECMAScript 6 имеет «генераторы», которые позволяют вам легко программировать в асинхронном стиле. 

function* myGenerator() {
    const callback = yield;
    let [response] = yield $.ajax("https://stackoverflow.com", {complete: callback});
    console.log("response is:", response);

    // examples of other things you can do
    yield setTimeout(callback, 1000);
    console.log("it delayed for 1000ms");
    while (response.statusText === "error") {
        [response] = yield* anotherGenerator();
    }
}

Для запуска вышеуказанного кода вы делаете это: 

const gen = myGenerator(); // Create generator
gen.next(); // Start it
gen.next((...args) => gen.next([...args])); // Set its callback function

Если вам нужно настроить таргетинг на браузеры, которые не поддерживают ES6, вы можете запустить код через Babel или short-compiler для генерации ECMAScript 5.

Обратный вызов ...args завернут в массив и разрушен, когда вы их читаете так что шаблон может справиться с обратными вызовами, которые имеют несколько аргументов. Например, с узлом fs : 

const [err, data] = yield fs.readFile(filePath, "utf-8", callback);

9
задан saadq 15 April 2015 в 02:15
поделиться

3 ответа

Вы можете легко сделать это с помощью перехода 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>

И затем добавьте перед change: 

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/

8
ответ дан Álvaro Reneses 24 August 2018 в 02:27
поделиться

Это ответ без использования обертки. Предположим, что мне нужно заменить элемент 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)">
0
ответ дан Harsha 24 August 2018 в 02:27
поделиться

Мне кажется, это отличная возможность представить вам невероятную анимационную платформу GreenSock (или 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 , который я сделал из вашего.

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

0
ответ дан Tahir Ahmed 24 August 2018 в 02:27
поделиться
Другие вопросы по тегам:

Похожие вопросы: