Switch Left & Right Value

by csvwolf

HTML

<div>
<span class="before">左边111</span>
<span><<<>>></span>
<span class="before">右边2333</span>
</div>
<button>
  transform
</button>

CSS

body {
  margin: 0;
  padding: 0;
}

div {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

span {
  transition: transform 0.5s;
  display: inline-block;
}

.before:first-child {
  transform: translateX(10px);
}

.transformer:first-child {
  transform: translateX(calc(100vw - 100% - 10px));
}

.before:last-child {
  transform: translateX(-10px);
}

.transformer:last-child {
  transform: translateX(calc(-100vw + 100% + 10px));
}

JavaScript

const button = document.querySelector('button');
const spans = document.querySelectorAll('span');
let onOff = false;
button.addEventListener('click', (event) => {
	onOff = !onOff;
	[...spans].forEach(span => {
  	span.className = onOff ? 'transformer' : 'before'
  });
});