Показать сообщение отдельно
  #1 (permalink)  
Старый 28.03.2017, 12:30
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

событие transitionend не срабатывает
Коллеги доброго времени суток, есть скрипт:
var PLUGIN= (function() {
"use strict";
	function _CROSS_EVENTS(element, type, func) {
		this.add = function(element, type, func) {
			if(typeof addEventListener !== 'undefined') {
				element.addEventListener(type, func, false);
			} else if(typeof attachEvent !== 'undefined') {
				element.attachEvent('on' + type, func);
			} else {
				element['on' + type] = func;
			}
		},
		this.default = function(e) {
			if(typeof e.preventDefault !== 'undefined') {
				e.preventDefault();
			} else {
				e.returnValue = false;
			}
		},
		this.remove = function(element, tp, func) {
			if(typeof removeEventListener !== 'undefined') {
				element.removeEventListener(tp, func, false);
			} else if(typeof detachEvent !== 'undefined') {
				element.detachEvent('on' + tp, func);
			} else {
				element['on' + tp] = null;
			}
		}
	};

	var _crossy = new _CROSS_EVENTS();

	var _EVENTS_TYPE = {
			start: '',
			move: '',
			end: '',
			resize: 'resize',
			transitionend: 'transitionend'
		};

	function _SLIDER() {
        this.bullets = false,
        this.arrows = false,
        this.dragDrop = false,
        this.autoSwitch = false,
        this.deadZone = false,
        this.standartDuration = 100
	}

	_SLIDER.INIT = function(element, params) {
		_sliderSize(element);
		var  slider = new _SLIDER();
		slider.element = element.querySelector('.slider_list');
		_setOptions(slider, params);
		_getEvenetsType(element);

		function _sliderStart(e) {
            e = e || window.e;

	        if (slider.action && !slider.element) return;

			if (!slider.dragDrop) return;

	        slider.action = true;

	        var coords = _getOffset(slider.element),
	        	downX = e.clientX;

			slider.shiftX = downX - coords.left;

			slider.element.classList.add('move');

		}

		function _sliderGo(e) {
            e = e || window.e;
            if (!slider.action) return;
	       	slider.distanceX = e.clientX - slider.shiftX;
			_sliderMove(slider.element, slider.distanceX);
			_crossy.default(e);
		}

		function _sliderStop(e) {
            e = e || window.e;
	       	if (slider.action) {
				_getTransition(slider.element, slider.standartDuration);
				_sliderMove(slider.element, 0);
			}
		}

		function _transitionStop() {
            if (slider.action) {
	            _getTransition(slider.element, 0);
	            slider.element.classList.remove('move');
	            slider.action = false;
            }
		}

		function _sizeCrew(e) {
			e = e || window.e;
			_sliderSize(element);
		}

		_crossy.add(slider.element, 'mousedown', _sliderStart);
		_crossy.add(document, 'mousemove', _sliderGo);
		_crossy.add(document, 'mouseup', _sliderStop);
		_crossy.add(slider.element, 'transitionend', _transitionStop);
		_crossy.add(window, _EVENTS_TYPE.resize, _sizeCrew);

	};


    function _getTransition(element, duration) {
    	element.style.webkitTransition = '-webkit-transform ' + duration + 'ms linear';
    	element.style.mozTransition = '-moz-transform ' + duration + 'ms linear';
    	element.style.msTransition = '-ms-transform ' + duration + 'ms linear';
    	element.style.oTransition = '-o-transform ' + duration + 'ms linear';
    	element.style.transition = 'transform ' + duration + 'ms linear';
    }

    function _sliderMove(element, distance) {
		element.style.webkitTransform = "-webkit-translate(" + distance + "px, 0)";
		element.style.mozTransform = "-moz-translate(" + distance + "px, 0)";
		element.style.msTransform = "-ms-translate(" + distance + "px, 0)";
		element.style.oTransform = "-o-translate(" + distance + "px, 0)";
		element.style.transform = "translate(" + distance + "px, 0)";
    }

	function _sliderSize(element) {
		var screenWidth = _getScreenSize(),
			list = element.querySelector('.slider_list'),
			items = list.children;
		for (var i = 0;i < items.length;i++) {
			items[i].style.width = screenWidth + 'px';
		}
		list.style.width = (screenWidth * items.length) + 'px'
	}

    function _getScreenSize() { // выяснить разрешение экрана пользователя
    	return document.documentElement.clientWidth;
    }

	function _setOptions(object, params) {
		if (params && _isObject(params)) {
		    for (var key in params) {
	            object[key] = params[key];
	        }
		}
	};

    function _isObject(object) {
        if (object.toString == Object.prototype.toString) {
            return true;
        } else return false;
    };

	function _getOffset(element) {
	  var box = element.getBoundingClientRect();
	  return {
	    top: box.top + pageYOffset,
	    left: box.left + pageXOffset
	  };
	}

	return {
		sliderINIT: _SLIDER.INIT,
		crossEvent: _crossy,
	}
}());
			PLUGIN.crossEvent.add(document,'DOMContentLoaded', function() {
				var main = document,
					slider_one = main.querySelector('.slider_block.one'),
					slider_two = main.querySelector('.slider_block.two');

				_RMS.sliderINIT(slider_one, {
					dragDrop:true
				});
				_RMS.sliderINIT(slider_two);
			});

Собственно по коду наверное ясно, что это слайдер. Суть вопроса в том, что по событию transitionend должно все "обнуляться", а оно не "обнуляется". Помогите разобраться. Заранее благодарю
Ответить с цитированием