CSS 实现左右交换的效果

原文：https://codesky.me/archives/css-exchange-items-effect.wind

   

 <style>

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));

}

</style>

<div>

<span class="before">左边111</span>

<span><<<>>></span>

<span class="before">右边2333</span>

</div>

<button>

transform

</button>

<script>

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'

});

});

</script>