4

introducir la descripción de la imagen aquí

¿Cómo haría para que al presionar las letras por ejemplo, No tienes cuenta? se despliegue el botón a la derecha y rote?

Quedaría como el ejemplo de abajo. Y así mismo presionar el Tiene cuenta? el botón regrese a como estaba y las letras. ¿Cómo haria ese proceso con HTML, CSS y JavaScript?

Por ahora tengo esto.

<div class="boton_cambio" id="botonCambio">
    <span id="registrar">No Tiene cuenta?</span>
    <button type="button" onclick="cambioSesion()">
        <span id="arrow">=&gt;</span>
    </button>
    <span id="iniciar" style="display: none;">Tiene cuenta?</span>
</div>

3 respuestas 3

4

Lo que tú tienes es un componente con 2 estados igual que un checkbox, por lo que te recomiendo usar uno, con el beneficio adicional que será compatible con formularios.

El truco es bastante simple: Es utilizar un input type="checkbox en conjunto con un label. Los label's tiene la propiedad que al presionarlo activan su input asociado, es decir es lo mismo que presionar directamente el input. Y como a los input type="checkbox es poco el estilo que se le puede dar, lo que haces es esconderlo y darle estilo al label.

Algo así:

label:has(>input[type="checkbox"]){
    display: flex;
    width: 150px;
    background-color: #a1b6b6;
    border-radius: 40px;
    height: 30px;
    align-items: center;
    box-shadow: inset 1px 2px 3px 0px black;
    cursor:pointer;
    position:relative;
}
label > input[type="checkbox"]{
 display:none;
}
label:has(>input[type="checkbox"]):before{
    display: flex;
    content: '⇨';
    aspect-ratio: 1;
    height: 86%;
    border-radius: 50%;
    color: white;
    border: 1px solid black;
    place-items: center;
    font-size: 30px;
    background-color: #434345;
    box-shadow: 1px 0px 2px 0px #000000c2;
    transition: transform 1s;
    position:absolute;
}

label:has(>input[type="checkbox"]):after{
    content: 'No tiene cuenta?';
    display: block;
    text-align: right;
    width: 100%;
    margin: 0 10px;
}
label:has(>input:checked):after{
 content: 'tiene cuenta?';
 text-align: left;
}
label:has(>input:checked):before{
    transform: translateX(121px) rotateZ(180deg);
}
<label>
 <input type="checkbox">
</label>

2
  • Muchas gracias !! Commented el 5 jun. a las 2:36
  • 1
    @StevenRojasGuerrero si la respuesta te sirvió no olvides marcarla como aceptada
    – René
    Commented el 5 jun. a las 8:57
0

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 = "&lt;="
  • arrow.innerHTML = "=&gt;"

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 == "&lt;="){
      arrow.innerHTML = "=&gt;"
      registrar.innerHTML="No tiene cuenta?"
      i.tnt.push(setInterval(animaNoTieneTiene,17))
    }else{
      arrow.innerHTML = "&lt;="
      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">=&gt;</span>
    </button>
    <span id="registrar">No tiene cuenta?</span>
    <span id="iniciar" style="display: none;">Tiene cuenta?</span>
</div>

0

Animación del botón moverBoton

Mueve el botón horizontalmente de inicio a fin, incrementando 1 píxel.

inicio y fin: posiciones inicial y final para el movimiento.
callback: se ejecuta cuando finaliza el movimiento.
setInterval: actualiza la posición del botón cada milisegundo.

function cambiarTextosEIconos(texto, icono)
Modifica el texto de spanregistrar y el ícono del botón.
texto: nuevo texto para spanregistrar.
icono: dirección del nuevo ícono (izquierda o derecha).

Evento al hacer clic:

Verifica si el botón está en su posición inicial.
Si está en la posición inicial, mueve el botón de 0 a 167 píxeles y cambia el texto y el ícono.
Si no está en la posición inicial, mueve el botón de 167 a 2 píxeles y cambia nuevamente el texto y el ícono.
Alterna el estado de estaEnPosicionInicial para la próxima vez que se haga clic en el botón.

const botonCambio = document.querySelector('button[type="button"]');
const spanregistrar = document.querySelector("#registrar");
const spaniniciar = document.querySelector("#iniciar");
const ico = document.querySelector("#arrow");
let estaEnPosicionInicial = true;

ico.innerHTML = '<i class="fa-solid fa-chevron-right"></i>';

function moverBoton(inicio, fim, callback) {
    let i = inicio;
    const incremento = inicio < fim ? 1 : -1;
    const intervalo = setInterval(function() {
        if ((incremento > 0 && i <= fim) || (incremento < 0 && i >= fim)) {
            botonCambio.style.left = `${i}px`;
            if (i === fim) {
                clearInterval(intervalo);
                if (callback) callback();
            }
            i += incremento;
        } else {
            clearInterval(intervalo);
        }
    }, 1);
}

function cambiarTextosEIconos(texto, icono) {
    spanregistrar.textContent = texto;
    ico.innerHTML = `<i class="fa-solid fa-chevron-${icono}"></i>`;
}

botonCambio.addEventListener('click', function() {
    if (estaEnPosicionInicial) {
        moverBoton(0, 167, function() {
            cambiarTextosEIconos('Tiene cuenta?', 'left');
        });
    } else {
        moverBoton(167, 2, function() {
            cambiarTextosEIconos('No Tiene cuenta?', 'right');
        });
    }
    estaEnPosicionInicial = !estaEnPosicionInicial;
});
.boton_cambio{
  position: relative;
  height: 35px;
  width: 203px;
  border: 1px solid black;
  border-radius: 20px;
}
button{
  
  margin: 2px;
  position:absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 0;
  border: 1px solid black;
}

#registrar{
  position: absolute;
  left: 55px;
  margin: 9px;
}

.fa-chevron-right, .fa-chevron-left{
color:#F80404
}
span{
  color: #046C1C;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>


<div class="boton_cambio" id="botonCambio">
    <span id="registrar">No Tiene cuenta?</span>
    <button type="button">
        <span id="arrow"></span>
    </button>
    <!-- <span id="iniciar">Tiene cuenta?</span> -->
</div>

Esta es una lógica simple sobre cómo se pueden manipular los componentes de la página HTML. Se han eliminado algunos detalles, pero nada demasiado drástico.

La estilización del componente utilizado

El botón de intercambio con borde redondeado y los íconos de flecha hacia la derecha y hacia la izquierda. El botón tiene un ancho fijo y altura ajustable, y los íconos de flecha tienen un ancho y altura fijos también, y registrar tiene una posición específica en la pantalla.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.