0

Доброго всем. Как можно применить анимацию mo.js к нескольким элементам, вернее ко всем элементам с одним и тем же классом?

var el = document.querySelector('.my-button'),
	elSpan = el.querySelector('span'),
	// mo.js timeline obj
	timeline = new mojs.Timeline(),
	scaleCurve = mojs.easing.path('M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0'),

	// tweens for the animation:

	// burst animation
	tween1 = new mojs.Burst({
		parent: el,
		duration: 1500,
		shape : 'circle',
		fill : [ '#e67e22', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
		x: '50%',
		y: '50%',
		opacity: 0.8,
		childOptions: { radius: {20:0} },
		radius: {40:120},
		angle: {0: 180},
		count: 8,
		isSwirl: true,
		isRunLess: true,
		easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
	}),
	// ring animation
	tween2 = new mojs.Transit({
		parent: el,
		duration: 750,
		type: 'circle',
		radius: {0: 50},
		fill: 'transparent',
		stroke: '#2ecc71',
		strokeWidth: {15:0},
		opacity: 0.6,
		x: '50%',     
		y: '50%',
		isRunLess: true,
		easing: mojs.easing.bezier(0, 1, 0.5, 1)
	}),
	// icon scale animation
	tween3 = new mojs.Tween({
		duration : 900,
		onUpdate: function(progress) {
			if(progress > 0.3) {
				var scaleProgress = scaleCurve(progress);
				elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
				elSpan.style.WebkitTransform = elSpan.style.color = '#2ecc71';
			} else {
				elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(0,0,1)';
				elSpan.style.WebkitTransform = elSpan.style.color = 'rgba(0,0,0,0.3)';
			}
		}
	});

// add tweens to timeline:
timeline.add(tween1, tween2, tween3);

// when clicking the button start the timeline/animation:
el.addEventListener('mousedown', function() {
	timeline.start();
});
.wrapper {
    background: #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	text-align: center;
	height: 500px;
}

.my-button {
	background: transparent;
	border: none;
	outline: none;
	margin: 0;
	padding: 0;
	position: relative;
	text-align:center;
}
svg {
	top: 0;
	left: 0;
}
.send-icon {
	position: relative;
	font-size: 40px;
	color: rgba(0,0,0,0.3);
}
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<script src="http://netgon.net/mo.min.js"></script>
<div class="wrapper">
	<button class="my-button">
		<span class="send-icon fa fa-paper-plane"></span>
	</button>
</div>

Пример на codepen

9
  • простая замена querySelector на querySelectorAll не решает задачу Commented 21 июн. 2016 в 15:06
  • весь необходимый код должен быть непосредственно в вопросе, ссылка может служить дополнением
    – Grundy
    Commented 21 июн. 2016 в 15:08
  • добавил код отдельно Commented 21 июн. 2016 в 15:52
  • к каким нескольким элементам в примере идет попытка применить анимацию?
    – Grundy
    Commented 21 июн. 2016 в 16:41
  • К тегу button с классом class="my-button", то есть к нескольким таким кнопкам с одним и тем же классом на одной странице. Commented 21 июн. 2016 в 17:55

1 ответ 1

1

Достаточно просто вынести в функцию создание анимации для элемента, а потом просто применить ее для всех выбранных элементов. например так:

function initAnimation(el) {
  var elSpan = el.querySelector('span'),
    // mo.js timeline obj
    timeline = new mojs.Timeline(),
    scaleCurve = mojs.easing.path('M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0'),

    // tweens for the animation:

    // burst animation
    tween1 = new mojs.Burst({
      parent: el,
      duration: 1500,
      shape: 'circle',
      fill: ['#e67e22', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE'],
      x: '50%',
      y: '50%',
      opacity: 0.8,
      childOptions: {
        radius: {
          20: 0
        }
      },
      radius: {
        40: 120
      },
      angle: {
        0: 180
      },
      count: 8,
      isSwirl: true,
      isRunLess: true,
      easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
    }),
    // ring animation
    tween2 = new mojs.Transit({
      parent: el,
      duration: 750,
      type: 'circle',
      radius: {
        0: 50
      },
      fill: 'transparent',
      stroke: '#2ecc71',
      strokeWidth: {
        15: 0
      },
      opacity: 0.6,
      x: '50%',
      y: '50%',
      isRunLess: true,
      easing: mojs.easing.bezier(0, 1, 0.5, 1)
    }),
    // icon scale animation
    tween3 = new mojs.Tween({
      duration: 900,
      onUpdate: function(progress) {
        if (progress > 0.3) {
          var scaleProgress = scaleCurve(progress);
          elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
          elSpan.style.WebkitTransform = elSpan.style.color = '#2ecc71';
        } else {
          elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(0,0,1)';
          elSpan.style.WebkitTransform = elSpan.style.color = 'rgba(0,0,0,0.3)';
        }
      }
    });

  // add tweens to timeline:
  timeline.add(tween1, tween2, tween3);

  // when clicking the button start the timeline/animation:
  el.addEventListener('mousedown', function() {
    timeline.start();
  });
}

[].forEach.call(document.querySelectorAll('.my-button'), initAnimation);
.wrapper {
  background: #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  text-align: center;
  height: 150px;
}
.my-button {
  background: transparent;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
}
svg {
  top: 0;
  left: 0;
}
.send-icon {
  position: relative;
  font-size: 40px;
  color: rgba(0, 0, 0, 0.3);
}
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script src="http://netgon.net/mo.min.js"></script>
<div class="wrapper">
  <button class="my-button">
    <span class="send-icon fa fa-paper-plane"></span>
  </button>
  <button class="my-button">
    <span class="send-icon fa fa-paper-plane"></span>
  </button>
  <button class="my-button">
    <span class="send-icon fa fa-paper-plane"></span>
  </button>
  <button class="my-button">
    <span class="send-icon fa fa-paper-plane"></span>
  </button>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.