原文:https://codesky.me/archives/css-exchange-items-effect.wind
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));
}
左边111
<<<>>>
右边2333
transform
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'
});
});