0

Estoy tratando de usar @keyframes en mozilla y no funciona pero en chrome todo perfecto, en cambio cuando intento usar transitions en chrome no me funciona pero en mozilla sí. Ya he intentado usar los prefijos que se compilan con SCSS pero nada, también agregué el prefijo -moz- porque SCSS solo compilaba con los prefijos -webkit- y nada.

<body>
  <details>
      <summary>HTML</summary>
      <div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima accusantium mollitia soluta, maiores eligendi laudantium, vero a, possimus repellat odit minus numquam quas officia eveniet voluptate nemo obcaecati reiciendis distinctio.</p>
      </div>
  </details>

  <details>
    <summary>CSS</summary>
    <div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima accusantium mollitia soluta, maiores eligendi laudantium, vero a, possimus repellat odit minus numquam quas officia eveniet voluptate nemo obcaecati reiciendis distinctio.</p>
    </div>
</details>

<details>
    <summary>JS</summary>
    <div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima accusantium mollitia soluta, maiores eligendi laudantium, vero a, possimus repellat odit minus numquam quas officia eveniet voluptate nemo obcaecati reiciendis distinctio.</p>
    </div>
</details>
</body>

Aquí Css utilizando animaciones:

  1. Primera animación con propiedad height selector div
  2. Segunda animación con propiedad opacity y margin-top para el selector p.
*,
::before,
::after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: sans-serif;
}

details {
  width: 500px;
  margin: 1.5em auto;
}

summary {
  background-color: hsla(140, 100%, 40%, .9);
  padding: .8em 1em;
  cursor: pointer;
  color: #111;
  outline: none;
}

summary::marker {
  color: #fff;
}

div {
  padding: 0 1em;
  box-shadow: 1px 1px 1px 0px #ddd;
  border: 1px solid #eee;
  animation-name: height;
  animation-duration: .4s;
  height: 150px;
}

@keyframes height {
  from {
    height: 0;
  }
  to {
    height: 150px;
  }
}

p {
  color: #111;
  animation-name: opacity;
  animation-duration: .4s;
}

@keyframes opacity {
  from {
    margin-top: 0;
    opacity: 0;
  }

  to {
    margin-top: 1em;
    opacity: 1;
  }
}

Aquí Css utilizando transiciones:

  1. Transición para selector div
  2. transición para selector p
*,
::before,
::after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: sans-serif;
}

details {
  width: 500px;
  margin: 1.5em auto;
}

summary {
  background-color: hsla(140, 100%, 40%, .9);
  padding: .8em 1em;
  cursor: pointer;
  color: #111;
  outline: none;
}

summary::marker {
  color: #fff;
}

div {
    padding: 0 1em;
    box-shadow: 1px 1px 1px 0px #ddd;
    border: 1px solid #eee;
    transition: height .4s;
    height: 0;
}

details[open] div {
    height: 150px;
}

p {
    color: #111;
    opacity: 0;
    margin-top: 0;
    transition: all .6s;
}

details[open] p {
    margin-top: 1em;
    opacity: 1;
}

Gracias de antemano

3

1 respuesta 1

0

Estás aplicando directamente las animaciones a los contenedores en lugar de hacerlo a la acción details[open]

Prueba de esta forma:

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: sans-serif;
}

details {
  width: 500px;
  margin: 1.5em auto;
}

summary {
  background-color: hsla(140, 100%, 40%, .9);
  padding: .8em 1em;
  cursor: pointer;
  color: #111;
  outline: none;
}

summary::marker {color: #fff;}

div {
  padding: 0 1em;
  box-shadow: 1px 1px 1px 0px #ddd;
  border: 1px solid #eee;
  height: 150px;
}

/* aplicando animación */
details[open] div {
  animation-name: height;
  animation-duration: .4s;
}
details[open] p {
  animation-name: opacity;
  animation-duration: .4s;
}

@keyframes height {
  from {height: 0;}
  to {height: 150px;}
}

p {color: #111;}

@keyframes opacity {
  from {margin-top: 0; opacity: 0;}
  to {margin-top: 1em; opacity: 1;}
}
<details>
      <summary>HTML</summary>
      <div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima accusantium mollitia soluta, maiores eligendi laudantium, vero a, possimus repellat odit minus numquam quas officia eveniet voluptate nemo obcaecati reiciendis distinctio.</p>
      </div>
  </details>

  <details>
    <summary>CSS</summary>
    <div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima accusantium mollitia soluta, maiores eligendi laudantium, vero a, possimus repellat odit minus numquam quas officia eveniet voluptate nemo obcaecati reiciendis distinctio.</p>
    </div>
</details>

<details>
    <summary>JS</summary>
    <div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima accusantium mollitia soluta, maiores eligendi laudantium, vero a, possimus repellat odit minus numquam quas officia eveniet voluptate nemo obcaecati reiciendis distinctio.</p>
    </div>
</details>

3
  • Gracias, ahora si me funcionó las animaciones para los dos navegadores, pero porque las transiciones solo siguen funcionando en Firefox y no en Chrome??
    – Carlos
    Commented el 19 nov. 2020 a las 16:22
  • Has usado -webkit-transition?
    – Elboy
    Commented el 19 nov. 2020 a las 16:36
  • Si, tampoco funciona. ¿Como podría hacerlo con transition?
    – Carlos
    Commented el 21 nov. 2020 a las 17:05

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.