0
176
VistasLa transición de CSS no responde
Soy nuevo en el uso de transiciones y mi transición no responde. Debe haber algo mal con mi código. Estoy usando tarjetas en mi sitio y agregué un (mouseenter) para tener la información en la pantalla de la tarjeta cuando se pasa el mouse, funciona pero la transición arroja un error, probablemente hay algo que no entiendo, cualquier ayuda es ¡apreciado!
<div class="card"> <div class="inner-card"> <h5>Title</h5> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p> <a href="">Link goes here</a> <div class="img-div"> <img src="../static/img/search.png" class="card-img" alt=""> </div> </div> </div> .card{ display: flex; flex-direction: column; justify-content: end; width: 350px; height: 180px; background: lightgreen; border: 2px solid black; margin-left: 8px; margin-bottom: 8px; cursor: pointer; } .inner-card{ display: none; } .inner-card.active{ display: flex; flex-direction: column; justify-content: end; background:rgba(255,165,0,0.5) transition: all 400ms ease-in-out; } <script> $(document).ready(function () { $('.card').on('mouseenter', function () { $(this).find(".inner-card").toggleClass('active'); }); $('.card').on('mouseleave', function () { $(this).find(".inner-card").toggleClass('active'); }); }); </script> 
2 Respuestas
Responde la pregunta0
Como menciono en mi comentario:
- monitor
- dirección de flexión
- justificar-contenido
son propiedades CSS no animables , ya que dicha transition y animation no tendrán efecto, otras propiedades animables en la definición se ignoran.
Esto se puede eludir mediante la transición entre opacity: 0 y 1 .
En el fragmento , la clase .inner-card se define como lo haría normalmente, pero usando opacity: 0 para 'ocultar' su contenido.
Se introduce el selector .card:hover .inner-card {..} para controlar la transición a opacity: 1 sin necesidad de JS.
Para estar completo, la clase .inner-card necesita una transition para volver al original sin problemas cuando el cursor sale de la tarjeta.
.card{ display: flex; flex-direction: column; justify-content: end; width: 350px; height: 180px; background: lightgreen; border: 2px solid black; margin-left: 8px; margin-bottom: 8px; } .inner-card{ display: flex; flex-direction: column; justify-content: end; opacity: 0; background-color: transparent; transition: opacity 400ms ease-in-out, background-color 400ms ease-in-out; } .card:hover .inner-card { cursor: pointer; opacity: 1; background-color:rgba(255,165,0,0.5); transition: all 400ms ease-in-out; } <div class="card"> <div class="inner-card"> <h5>Title</h5> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p> <a href="">Link goes here</a> <div class="img-div"> <img src="../static/img/search.png" class="card-img" alt=""> </div> </div> </div>0
Si entendí correctamente y necesita que el texto se presente durante la revisión, aquí está.
.inner-card a{ color: inherit; text-decoration: none; text-decoration: underline; } .inner-card{ display: flex; flex-direction: column; justify-content: end; width: 350px; height: 180px; margin-left: 8px; margin-top: 15px; color: lightgreen; background-color: lightgreen; border: 2px solid black; padding: 10px; border-radius: 3px; } .inner-card:hover{ cursor: pointer; color: black; background: rgba(255,165,0,0.5); } <div class="card"> <div class="inner-card"> <h5>Title</h5> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p> <a href="#">Link goes here</a> <div class="img-div"> <img src="../static/img/search.png" class="card-img" alt=""> </div> </div> </div>Esta tarea se puede hacer sin js. Avísame si te entendí mal.