1

Estoy realizando una animación la cual debería hacer que un card se mueva de un lugar a otro presionando el card, pero estoy teniendo un problema y es que quiero que cuando llegue al final de la animación ese card se expanda al estilo de un modal, pero al momento de realizar el final de la animación este sigue siendo del mismo tamaño y no encuentro forma de hacer ese tipo de animación, intente con dos animaciones a la vez pero estas cambian de forma muy extrañas.

Este es mi card:

const abrir = e => {
        e.classList.add('diseñar')
    }
.card {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-radius: 0.4rem;
        box-shadow: 2px 5px 4px gray;
        transition: .3s;
    }
    
    .card:hover {
        cursor: pointer;
        transform: scale(1.06);
    }
    
    .card-img {
        width: 50%;
    }
    
    .card-img>img {
        width: 100%;
        height: 10.6rem;
        object-fit: fill;
    }
    
    .card-content{
        width: 50%;
        color: gray;
        padding: 1rem;
        font-size: .7rem;
    }
    
    .content-date {
        display: flex;
        justify-content: space-between;
        font-weight: bold;
    }
    
    .card-content__botton {
        margin-top: 1rem;
        text-align: center;
    }
    
    .card-content__botton>button {
        text-decoration: none;
        border: 1px solid red;
        text-align: center;
        background-color: red;
        color: white;
        border-radius: .3rem;
        padding: .5rem 1rem;
    }
    
    .diseñar {
        animation: forwards 2s centrar;
    }
    
    @keyframes centrar {
        0% {
            margin: 0;
        }
    
        50% {
            margin-top: 300px;
        }
    
        100% {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 300px;
            width: 950px;
            height: 10rem;
        }
    }
<div class="card" id="letra" onclick="abrir(this);">
        <div class="card-img">
            <img src="capablanca.jpg" alt="capablanca">
        </div>
        <div class="card-content">
            <div class="content-date">
                <div class="content-date__title">
                    <span>Ganador de Torneo</span>
                </div>
                <div class="content-date__date">
                    <span>26 de Octubre del 21</span>
                </div>
            </div>
            <div class="card-content__content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis voluptatum quasi corrupti aliquam delectus perferendis et ea asperiores, neque quam alias aut totam aperiam quod accusantium mollitia, reprehenderit hic omnis.
            </div>
        </div>
    </div>

1 respuesta 1

1

Supongo que los estilos que deseas aplicar cuando se expanda van a ser muy diferentes de los originales y, por lo tanto, sería complicado usar la misma animación para lograrlo.

Afortunadamente, puedes escuchar el evento animationend, que se dispara cuando termina una animación CSS y solo necesitas:

  1. Cancelar el evento para que no afecte los cambios posteriores
  2. Agregar la nueva clase para mostrar como modal
    • Si la nueva clase tiene animación, también puedes escuchar el evento y necesitarás removerlo posteriormente
  3. Eliminar la clase diseñar

Recomendación: Evita el uso de eventos dentro de la etiqueta <div onclick="evento(this)"> porque generalmente complican el mantenimiento y, escuchando eventos (addEventListener), puedes tener tu código más organizado y legible.

// Crear función para animar y después mostrar como modal
const abrir = e => {
    // Desde el evento se obtiene el elemento que se debe animar
    let card = e.target.closest('.card');
    if(card.classList.contains('diseñar')) {
        // Evitar aplicar nuevamente la animación
        return;
    }
    if(card.classList.contains('grande')) {
        // Devolver a posición original
        card.classList.remove('grande');
    } else {
        // Animar
        card.classList.add('diseñar');
        // Ejecutar función cuando termine la animación
        card.addEventListener('animationend', abrirFin);
    }
};

const abrirFin = e => {
    let card = e.target.closest('.card');
    // Remover evento para evitar acumulación o interferencias
    card.removeEventListener('animationend', abrirFin);
    // Agregar clase para mostrar en grande
    card.classList.add('grande');
    // Eliminar clase de animación
    card.classList.remove('diseñar');
};

// Obtener todas las tarjetas por clase
const cards = document.querySelectorAll('.card');
// Recorrer y asignar evento
cards.forEach(card => card.addEventListener('click', abrir));
.card {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-radius: 0.4rem;
        box-shadow: 2px 5px 4px gray;
        transition: .3s;
    }
    
    .card:hover {
        cursor: pointer;
        transform: scale(1.06);
    }
    
    .card-img {
        width: 50%;
    }
    
    .card-img>img {
        width: 100%;
        height: 10.6rem;
        object-fit: fill;
    }
    
    .card-content{
        width: 50%;
        color: gray;
        padding: 1rem;
        font-size: .7rem;
    }
    
    .content-date {
        display: flex;
        justify-content: space-between;
        font-weight: bold;
    }
    
    .card-content__botton {
        margin-top: 1rem;
        text-align: center;
    }
    
    .card-content__botton>button {
        text-decoration: none;
        border: 1px solid red;
        text-align: center;
        background-color: red;
        color: white;
        border-radius: .3rem;
        padding: .5rem 1rem;
    }
    
    .diseñar {
        animation: forwards 2s centrar;
    }
    
    @keyframes centrar {
        0% {
            margin: 0;
        }
    
        50% {
            margin-top: 300px;
        }
    
        100% {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 300px;
            width: 950px;
            height: 10rem;
        }
    }
    /* Aplica los estilos necesarios para que se muestre como modal */
    .grande {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
        width: 950px;
        height: 400px;
        /* También puedes agregar otra animación */
    }
<div class="card" id="letra">
        <div class="card-img">
            <img src="capablanca.jpg" alt="capablanca">
        </div>
        <div class="card-content">
            <div class="content-date">
                <div class="content-date__title">
                    <span>Ganador de Torneo</span>
                </div>
                <div class="content-date__date">
                    <span>26 de Octubre del 21</span>
                </div>
            </div>
            <div class="card-content__content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis voluptatum quasi corrupti aliquam delectus perferendis et ea asperiores, neque quam alias aut totam aperiam quod accusantium mollitia, reprehenderit hic omnis.
            </div>
        </div>
    </div>

1
  • muchas gracias estoy apenas practicando todo lo respectivo al front, gracias por tus consejos y una respuesta muy clara Commented el 18 feb. 2021 a las 0:37

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.