Хотел бы анимировать измение приставки Развернуть на Cвернуть, а так же в обратную сторону, но только не знаю как. Это кнопка, которая должна открывать/скрывать контент.
let openElem = document.querySelectorAll('.open');
let openSpan = document.querySelectorAll('.openSpan');
for (let i = 0; i < openElem.length; i++) {
openElem[i].addEventListener('click', () => {
openElem[i].classList.toggle('active');
function textAnimation(text) {
requestAnimationFrame(function(){
// Тут происходит анимация
openSpan[i].innerHTML = text;
});
}
if (openElem[i].classList.contains('active')) {
textAnimation('C');
} else {
textAnimation('Раз')
}
});
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
font-size: 24px;
font-family: 'Open Sans', sans-serif;
}
.open {
-moz-user-select: none;
user-select: none;
background-color: beige;
padding: 2px;
margin-top: 50px;
margin-left: 30px;
display: inline-block;
cursor: pointer;
}
.openSpan {
color: red;
}
<a class="open"><span class="openSpan">Раз</span>вернуть</a>