Смена класса по клику, слайдер блоков

Вопрос-ответ JavaScript
1

Добрый день, помогите пож!
Есть код https://jsfiddle.net/f19mt22m. Грубо говоря, нужно сделать слайдер блоков, при появлении блоков использовать класс bounceInLeft при переходе на другой блок (кликом на любую иную ссылку) менять класс в предыдущем на bounceOutRight. Надеюсь объяснил доходчиво.

В общем по ссылке сделана анимация в которой блок появляется по силке [#home], нужно сделать что б при клику на иную силку [#play || #service || #blog || #contact] блок [#home] красиво уходил, и потом появлялся соответствующий следующий блок.

Пробовал по всякому, но я так понимаю что ни одна моя идея была не верная.
Анимация взята из animate.css

За ранние спасибо за подсказку.

2

думаю что решить эту проблему без JS не получится. Перед тем как проанимировать элемент №2 (вызвать анимацию bounceOutRight) нужно сначала спрятать предыдущий элемент с помощью анимации bounceInLeft. А для этого нужна кое-какая задержка.

3

@Nikolay прав, что необходимо хитрое манипулирование классами, да еще и в разные моменты времени (начать отображение слайда красивее до того как завершится отображение предыдущего).

Работающий вариант https://jsfiddle.net/f19mt22m/1/
Тебе осталось довести до ума верстку, чтобы когда видно 2 слайда, скрывающийся не подвигался.

var SHOWING_CLASS = 'bounceInLeft'
var HIDING_CLASS = 'bounceOutRight'

// 
var currentSlideNode

// Flag, forbids next animation to start when true
var isAnimating = false

// Main slide-switching function
function showSlideById(slideNodeId) {

	// Don't switch slides if in middle of animation
	if (isAnimating) {
		return
	}

	var nextSlideNode = getSlideNodeById(slideNodeId)
	if (!nextSlideNode) {
		console.warn('did not find expected slide node', slideNodeId)
		return
	}
	// Trying to swithc to the same slide. Do nothing
	if (nextSlideNode === currentSlideNode) {
		return
	}
	isAnimating = true
	// Save reference, because currentSlideNode could change before animation callback will trigger
	// so animation callback will
	if (currentSlideNode) {
		currentSlideNode.classList.remove(SHOWING_CLASS)
		currentSlideNode.addEventListener('animationend', function onAnimationEnd() {
			// Important to rely on this, not variable, because variable might be already changed by _showSlideNode function
			// Hide node
			this.classList.remove(HIDING_CLASS)
			this.style.display = 'none'
			// Remove listener, not to stack them on multiple animations ends
			this.removeEventListener('animationend', onAnimationEnd, false)
			updateAnimationStatus()
		}, false)
		// Start hiding
		currentSlideNode.classList.add(HIDING_CLASS)

		// Start showing animation earlier, than hiding animation ends
		setTimeout(function () {
			_showSlideNode(nextSlideNode)
		}, 100)
	} else {
		_showSlideNode(nextSlideNode)
	}
}

// Allows to update animation status from 2 places: animation end
var triggersToSwitchAnimationStatus = 2
var triggered = 0
function updateAnimationStatus() {
	triggered += 1
	if (triggered === triggersToSwitchAnimationStatus) {
		triggered = 0
		isAnimating = false
	}
}

function _showSlideNode(slideNode) {
	slideNode.style.display = 'table'
	slideNode.classList.add(SHOWING_CLASS)
	isAnimating = false
	currentSlideNode = slideNode
	updateAnimationStatus()
}

function getSlideNodeById(slideId) {
	return document.getElementById(slideId)
}

document.getElementById('menu').addEventListener('click', function (event) {
	var slideIdToShow = event.target.hash ? event.target.hash.split('#')[1] : null
	if (slideIdToShow) {
		showSlideById(slideIdToShow)
	}
})

showSlideById('home')