Después de leer esas dos preguntas:

¡Tengo uno nuevo para ti!

Problema

Quiero una animación al cerrar el evento de la etiqueta <details>. Pensé que solo revertir la animación de apertura haría el trabajo, pero desafortunadamente no.

$(function() {
  $('details').on('mouseover', function() {
    $(this).attr('open', true);
  }).on('mouseout', function() {
    $(this).attr('open', false);
  }).on('click', function(e) {
    e.preventDefault();
  })
});
details[open] SUMMARY~* {
  animation: sweepin .5s ease-in-out;
}

details[close] SUMMARY~* {
  animation: sweepout .5s ease-in-out;
}

@keyframes sweepin {
  0% {
    opacity: 0;
    margin-left: -10px
  }
  100% {
    opacity: 1;
    margin-left: 0px
  }
}

@keyframes sweepout {
  0% {
    opacity: 1;
    margin-left: 0px
  }
  100% {
    opacity: 0;
    margin-left: -10px
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<details>
  <summary>Here my little summary</summary>
  <p>... Do you want more details?</p>
  <p>Here have some details!</p>
</details>

Pregunta

¿Crees que esto es posible?

3
darckcrystale 17 abr. 2017 a las 01:32

3 respuestas

La mejor respuesta

Puede sustituir alternar .className por el selector details[close]; en el evento mouseover verifique si el elemento no es .open, si true, establezca la propiedad en .open = true en el evento mouseout agregue .className, use {{ X8}} animationend evento para eliminar .className y establecer .open en false en el controlador de eventos.

$(function() {
  $("details").on({
    mouseover: function() {
      if (!this.open && !$(this).is(".close"))
        $(this).prop("open", true)
        .one("animationend", function() {
          $(this).addClass("animationDone")
        })
    },
    mouseout: function _close() {
      if (!$(this).is(".close") && $(this).is(".animationDone"))
        $(this).addClass("close")
        .one("animationend", function() {
          $(this).prop("open", false)
          .removeClass("close animationDone")
        })
    },
    click: function(e) {
      e.preventDefault();
    }
  })
});
details[open] SUMMARY~* {
  animation: sweepin .5s ease-in-out;
}

details.close SUMMARY~* {
  animation: sweepout .5s ease-in-out;
}

@keyframes sweepin {
  0% {
    opacity: 0;
    margin-left: -10px
  }
  100% {
    opacity: 1;
    margin-left: 0px
  }
}

@keyframes sweepout {
  0% {
    opacity: 1;
    margin-left: 0px
  }
  100% {
    opacity: 0;
    margin-left: -10px
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<details>
  <summary>Here my little summary</summary>
  <p>... Do you want more details?</p>
  <p>Here have some details!</p>
</details>
5
guest271314 17 abr. 2017 a las 00:01

Perdón por cambiar la lógica, pero he encontrado esto más rápido y fluido.

$(function() {

  $('#summary').on('mouseover', function() {
  
    $('#triangleDown').fadeIn(0);
    $('#triangle').fadeOut(0);
    $('#content').addClass("open");
    
  }).on('mouseout', function() {
  
    $('#triangleDown').fadeOut(0);
    $('#triangle').fadeIn(0);
    $('#content').removeClass("open");
    
  })
  
});
#triangleDown{
  display:none;
}

span{
  font-size: 12px;
}

#content{
  
  opacity:0;
  margin-left: 0px;
  -webkit-transition:all 1s;
  transition:all 1s;
  
}

#content.open{
    opacity: 1;
    margin-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p id="summary"><span id="triangle">► </span><span id="triangleDown">▼ </span>Here my little summary</p>
  <div id="content">
  <p>... Do you want more details?</p>
  <p>Here have some details!</p>
  </div>
  
</div>
1
vlk 16 abr. 2017 a las 23:11

Puede usar una propiedad de modo de relleno de animación para mantener la posición original del div después de que se complete la animación. En el evento mouseover y mouse out, puede agregar y quitar el atributo abrir y cerrar.

Ver fragmento a continuación

$(function() {
  $('details').on('mouseover', function() {
   $(this).attr('open', true);
   $(this).removeAttr('close', false);


  }).on('mouseout', function() {
 
      $(this).attr('open', false);
            $(this).removeAttr('open', false);
            $(this).attr('close', true);
 


  }).on('click', function(e) {
    e.preventDefault();
  })
});
details[open] SUMMARY~* {
  animation: sweepin .5s ease-in-out;
    animation-fill-mode:forwards;
}

details[close] SUMMARY~* {
  animation: sweepout .5s ease-in-out;
  animation-fill-mode:forwards;
}

@keyframes sweepin {
  0% {
    opacity: 0;
    margin-left: -10px
  }
  100% {
    opacity: 1;
    margin-left: 0px
  }
}

@keyframes sweepout {
  0% {
    opacity: 1;
    margin-left: 0px;
  }
  100% {
    opacity: 0;
    margin-left: -10px
  }
}
details{
border:solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br><br>
<details>
  <summary>Here my little summary</summary>
  <p>... Do you want more details?</p>
  <p>Here have some details!</p>
</details>
0
repzero 16 abr. 2017 a las 23:07