Para esto es necesario que tenga animación, que vaya cambiando de posición horizontalmente, o sea, que vaya moviéndose. Entonces cada vez que presiono el botón, se debe crear un intervalo de tiempo. Para esto se puede usar setInterval
.
Se tiene una variable global window.i
con un array de intervalos.
ntt
: No Tiene > Tiene
tnt
: Tiene > No Tiene
Cuando termine la animación, se elimina los intervalos que están en el array, que cada intervalo es un número identificatorio que está asignado a las funciones.
ntt
: Array con intervalos asignados a animaNoTieneTiene
tnt
: Array con intervalos asignados a animatieneNoTiene
Una función es para que el despliegador (algunos los nombrarían pestillo), vaya para la derecha, la otra es para que vaya para la izquierda.
Para que pase por encima del texto, se agrega position: relative
en el CSS. Con el atributo class
de HTML se agrega el nombre de la clase, en este caso se usa class="despliegue"
.
La posición horizontal es el atributo left
.
Si no tiene la propiedad, se agrega 0px
... Luego se captura la cantidad de pixeles, a partir del atributo left
mediante una expresión regular.
t.style.left.match(/\d+/g)
Entonces para que cambie de posición se crea la posición, en este caso con el texto strings que se usa con la tilde invertida, sumando 10 pixeles a lo ya existente, nombro la variable p
de posición.
`${p+10}px`
Si la posición supera los 150 pixeles desde la izquierda hacia la derecha relativamente desde el nodo (etiqueta HTML) que tiene al lado, entonces elimina el intervalo de la animación, y en la otra función ocurre lo mismo si la posición es menor a 0 relativamente al nodo de al lado. Esto se logra con clearInterval
.
clearInterval(i.ntt.map(x=> clearInterval(x) ))
Además con innerHTML
se puede cambiar el texto de la flecha.
arrow.innerHTML = "<="
arrow.innerHTML = "=>"
La lentitud de la animación se asigna en setInterval
, por ejemplo 17
milisegundos por cada llamada a la función de mover (el mínimo posible es 10
):
setInterval(animaTieneNoTiene,17)
Código:
window.i = {
ntt: [],
tnt: []
}
function animaNoTieneTiene(){
var t = document.querySelector(".despliegue")
if(t.style.left==null){t.style.left="0px"}
var p = +t.style.left.match(/\d+/g)
if( p > 0 ){
t.style.left = `${p-10}px`;
}else{
clearInterval(i.tnt.map(x=> clearInterval(x) ))
}
}
function animaTieneNoTiene(){
var t = document.querySelector(".despliegue")
if(t.style.left==null){t.style.left="0px"}
var p = +t.style.left.match(/\d+/g)
if( p < 150 ){
t.style.left = `${p+10}px`;
}else{
clearInterval(i.ntt.map(x=> clearInterval(x) ))
}
}
function cambioSesion(){
setTimeout(()=>{
if(arrow.innerHTML == "<="){
arrow.innerHTML = "=>"
registrar.innerHTML="No tiene cuenta?"
i.tnt.push(setInterval(animaNoTieneTiene,17))
}else{
arrow.innerHTML = "<="
registrar.innerHTML="Tiene cuenta?"
i.ntt.push(setInterval(animaTieneNoTiene,17))
}
},100)
}
.despliegue {
position:relative;
}
<div class="boton_cambio" id="botonCambio">
<button class="despliegue" onclick="cambioSesion()">
<span id="arrow">=></span>
</button>
<span id="registrar">No tiene cuenta?</span>
<span id="iniciar" style="display: none;">Tiene cuenta?</span>
</div>