transiciones - transition css3 ejemplos
La altura automática de la transición CSS no funciona (5)
Deberías usar scaleY.
ul {
background-color: #eee;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease-in-out;
}
p:hover ~ ul {
transform: scaleY(1);
}
<p>Here (scaleY(1))</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
O puede usar un clip para cortar la lista.
ul {
clip: rect(auto, auto, 0, auto);
position: absolute;
left: 0;
margin: 0;
padding: 0;
color: white;
background-color: rgba(0, 0, 0, 0.8);
transition-delay: 0.29s;
transition-property: clip;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
h3:hover ~ ul,
h3:active ~ ul {
clip: rect(auto, auto, 10rem, auto);
}
<h3>Hover here</h3>
<ul>
<li>This</li>
<li>list</li>
<li>is</li>
<li>clipped.</li>
<li>A clip</li>
<li>transition</li>
<li>will</li>
<li>show it</li>
</ul>
<p>
Some text...
</p>
Esta pregunta ya tiene una respuesta aquí:
Tengo un sitio web, y decidí reemplazar los cuadros de alternancia basados en jquery con fragmentos de CSS puros. Cuando uso un valor de altura fijo para la transición (últimas líneas del CSS), funciona bien, pero con el valor auto , falta la animación, ¡solo el cambio de altura tiene un efecto!
¿Hay alguna manera de usar esto con el valor automático? Me gustaría utilizar textos variables y sin secuencias de comandos.
.ac-container{
width: 400px;
margin: 10px auto 30px auto;
text-align: left;
}
.ac-container label{
font-family: ''BebasNeueRegular'', ''Arial Narrow'', Arial, sans-serif;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#ffffff'', endColorstr=''#eaeaea'',GradientType=0 );
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
background: #c6e1ec;
color: #3d7489;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container input{
display: none;
}
.ac-container section{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container section p{
font-style: italic;
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ section{
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ section.ac-small{
height: 120px; /*auto*/
}
<div class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<section class="ac-small">
<p>Some content... </p>
</section>
<label for="ac-1">About us</label>
</div>
<div>
<input id="ac-2" name="accordion-2" type="checkbox" />
<section class="ac-small">
<p>Some content... </p>
</section>
<label for="ac-2">About us</label>
</div>
</div>
Hace un tiempo tuve este problema y me costó mucho superarlo, pero la transición de CSS no funciona con el valor automático. Finalmente se me ocurrió una solución mixta, deje que la transición CSS sea, pero cambie la altura con JavaScript. Funcionará perfectamente
No puede animar hacia o desde una dimensión de "auto" (desafortunadamente). Mi enfoque habitual para esto es animar la altura de un DIV externo que tiene un solo hijo que es un DIV sin estilo utilizado solo para medir la altura del contenido.
function growDiv() {
var growDiv = document.getElementById(''grow'');
if (growDiv.clientHeight) {
growDiv.style.height = 0;
} else {
var wrapper = document.querySelector(''.measuringWrapper'');
growDiv.style.height = wrapper.clientHeight + "px";
}
}
#grow {
-moz-transition: height .5s;
-ms-transition: height .5s;
-o-transition: height .5s;
-webkit-transition: height .5s;
transition: height .5s;
height: 0;
overflow: hidden;
outline: 1px solid red;
}
<input type="button" onclick="growDiv()" value="grow">
<div id=''grow''>
<div class=''measuringWrapper''>
<div>
The contents of my div.
</div>
<div>
The contents of my div.
</div>
<div>
The contents of my div.
</div>
<div>
The contents of my div.
</div>
<div>
The contents of my div.
</div>
<div>
The contents of my div.
</div>
</div>
</div>
Una solución si solo quieres usar CSS es hacer la transición max-height lugar de la height y configurarla en algo mayor de lo que nunca llegará ...
Aquí hay una DEMO
Tendrá que cambiar un poco la velocidad de la transición, pero al menos el ejemplo le da una idea de cómo se puede hacer. No olvides cambiar la propiedad en tu transición también. Desde la transition: height 0.5s; para la transition: max-height 0.5s; .
¡Espero que esto ayude!
.ac-container{
width: 400px;
margin: 10px auto 30px auto;
text-align: left;
}
.ac-container label{
font-family: ''BebasNeueRegular'', ''Arial Narrow'', Arial, sans-serif;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#ffffff'', endColorstr=''#eaeaea'',GradientType=0 );
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
background: #c6e1ec;
color: #3d7489;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container input{
display: none;
}
.ac-container section{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
max-height: 0px;
position: relative;
z-index: 10;
-webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container section p{
font-style: italic;
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ section{
-webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ section.ac-small{
max-height: 500px; /*auto*/
}
<div class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<section class="ac-small">
<p>Some content...Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... </p>
</section>
<label for="ac-1">About us</label>
</div>
<div>
<input id="ac-2" name="accordion-2" type="checkbox" />
<section class="ac-small">
<p>Some content... </p>
</section>
<label for="ac-2">About us</label>
</div>
</div>
auto no es un tipo apropiado para una propiedad animable, vea Transiciones CSS: 7. Propiedades animables . Necesita una longitud ( px , em , ...) o porcentaje ( 13.37% ).
Por lo tanto, una solución CSS única no es posible, siempre y cuando no se agregue auto a la lista. Tendrá que usar JavaScript o un valor de longitud específico.