Muy Buenas!!
Estoy trabajando en una web y me he encontrado con este problema que me está trayendo de cabeza y que aquí comparto con la esperanza de que alguno de vosotros me pueda echar un cabo.
El tema es que tengo un pequeño apartado con información compuesto por dos bloques de texto, el funcionamiento es tipo acordeón, es decir, al hacer click en el botón + (more-btn), se muestran los dos bloques y al hacer click nuevamente se muestra uno, todo ello mediante dos clases; project-info y all-txt que se "conmutan" mediante la clase toggle en javascript. Hasta aquí todo bien. El problema, es que al pasar de una clase a otra, me gustaría que en lugar de hacerlo de forma brusca, lo hiciese de forma gradual mediante la propiedad "transtion" de css. Pero no me funciona y sinceramente, no tengo ni idea de porque. Espero puedan ayudarme.
Muchisimas gracias de antemano y un saludo!
Código HTML:
<div class="project-info">
<p class="project-txt">Lorem ipsum...</p>
<p class="project-txt-hide">Lorem ipsum...</p>
</div>
<div class="more-btn"><span>[+]</span></div>
Código:
.project-info{
width: 100%;
height: 105px;
overflow: hidden;
-webkit-transition: ease-in 500ms;
-moz-transition: ease-in 500ms;
-o-transition: ease-in 500ms;
transition: ease-in 500ms;
&.all-txt{
height: auto;
-webkit-transition: ease-in 500ms;
-moz-transition: ease-in 500ms;
-o-transition: ease-in 500ms;
transition: ease-in 500ms;
.project-txt-hide{
visibility: visible;
}
}
.project-txt,.project-txt-hide{
width: 90%;
margin-right: 10%;
font-size: 13px;
line-height: 18px;
font-family: 'Lato', sans-serif;
font-weight: 400;
color:@black-txt;
margin-bottom: 20px;
}
.project-txt-hide{
visibility: hidden;
margin-bottom: -20px;
}
}
.more-btn{
width: 20%;
height: auto;
float: left;
margin-right: 80%;
margin-bottom: 38px;
margin-top: 23px;
text-align: left;
display: inline-block;
text-decoration: none;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 21px;
color:#000;
&:hover{
-webkit-transition: ease-in 500ms;
-moz-transition: ease-in 500ms;
-o-transition: ease-in 500ms;
transition: ease-in 500ms;
opacity: .5;
}
}