[Résolu] Transition :hover

Je voudrais ouvrir les <div> au survol
exemple le petit titre "creuser son sillon" est dans une <div> (#identifiée)


au passage de la souris elle se développe et on voit tout le texte

<div id="rideau06">
			<h3>Creuser son sillon.</h3>
			<img class="ombre" src="../images/ombreDebut.jpg" alt="" />
			<p>Cet atelier s’adresse à tout(e) écrivant(e) qui a déjà  participé à un atelier régulier pendant au moins une année, qui désire se doter de nouvelles techniques et apprendre à mieux organiser son travail d’écriture.</p>
			<p class="pointFort">Expérimenter des techniques littéraires.<br/>
			Opérer des relectures rédactionnelles efficaces.<br/>
			Adopter méthode et discipline de travail.<br/>
			Elaborer et poursuivre un chantier d’écriture.</p>
			<p>Les participants seront invités à débattre et échanger à propos des difficultés rencontrées (pannes, blocages,…), mais aussi des découvertes et plaisirs d’écrire.<br/>
				L’animateur encouragera les participants à écrire entre les séances et à retravailler leurs premiers jets afin de définir progressivement un chantier d’écriture.</ br></p>
			<img class="ombre" src="../images/ombreFin.jpg" alt="" />
			</div>

#rideau06{
	overflow: hidden;
	height: 6em;
}
#rideau06:hover{
	height: auto;
}

ça marche bien, mais c’est brutal !

j’eus voulu y mettre une transition

#rideau06{
animation-name: ouvre;
animation-duration: 1s;
-webkit-animation-name: ouvre;
-webkit-animation-duration: 1s;
-moz-animation-name: ouvre;
-moz-animation-duration: 1s;
}

@-webkit-keyframes ouvre {
	0%{
	overflow: hidden;
	height: 5em;
	}
	100%{
	overflow: hidden;
	height: auto;
	}
}
@-moz-keyframes ouvre {
	0%{
	overflow: hidden;
	height: 5em;
	}
	100%{
	overflow: hidden;
	height: 100px;
	}
}
@keyframes ouvre {
	0%{
	overflow: hidden;
	height: 5em;
	}
	100%{
	height: auto;
	}
}

et là, ça ne marche plus, elle se ferme completèment puis se rouvre brutalement (??)

une idée ?

rectification (j'avais pas vu le bouton "prévisualiser" !)

le code joint précédemment était l’essai d’animation pour que la div se développe une seconde après l’ouverture de la page

Je voulais mettre pour l'ouverture transition sur le hover :

#rideau06{
	overflow: hidden;
	height: 6em;
	-webkittransition-property: height;
	-webkit-transition-duration: 0.75s;
	-moz-transition-property: height;
	-moz-transition-duration: 0.75s;
	transition-property: height;
	transition-duration: 0.75s;
}
#rideau06:hover{
	height: auto;
}

le défaut d’affichage est de toute façon le même
je suppose si le problème de transition est résolu, celui de l'animation le sera aussi et vice-versa

désolé pour l’embrouille
(mais les deux ça m’intéressent

Merci d’avance

Bonsoir,

question récurant chez les débutants , pour qu'une transition puisse se faire il faut deux valeurs divisibles pour la même regle, afin que celle ci soit ajuster en fonction de la durée de la transition.

Tu as 6em et ... auto, il n'y a pas de calcul possible entre ces deux la et tu bascules de 6em à auto.

Tu peut éventuellement faire un compromis entre max-height:6em; et max-height:30em; sinon, il te faut avoir recours à JavaScript.

Cdt
Modifié par gcyrillus (13 Feb 2016 - 19:44)

Merci, ça marche

Eh oui, erreur de débutant, il est logique d’avoir la m^me unité au début et la fin

deux questions s’ensuivent :
Il n’y a aucun moyen que la valeur d’arrivée soit auto ?
ça m’oblige à faire une animation précise en "em" à chaque ouverture
c’est pas un peu casse-gueule si le navigateur change de caractère ?
Ultérieurement je voulais rendre élastique la largeur des colonnes, et là ça va pas marcher du tout

d’autre part, le texte était déjà et fixe et qu’il se dévoile au fur et à mesure que la div s’agrandit
j’aurai voulu que le bloc texte descende (Ah !, c’était si facile en flash !)

Gropilou a écrit :
M
Il n’y a aucun moyen que la valeur d’arrivée soit auto ?

auto n'est pas une valeur divisible, donc en css uniquement non !

Gropilou a écrit :

ça m’oblige à faire une animation précise en "em" à chaque ouverture
c’est pas un peu casse-gueule si le navigateur change de caractère ?
Ultérieurement je voulais rendre élastique la largeur des colonnes, et là ça va pas marcher du tout

d'où le mot "compromis" que j'ai utilisé , mais bon em sera moins "casse gueule" que pt (ou px) .

Gropilou a écrit :

d’autre part, le texte était déjà et fixe et qu’il se dévoile au fur et à mesure que la div s’agrandit
j’aurai voulu que le bloc texte descende (Ah !, c’était si facile en flash !)

pas sur que CSS soit une méthode utilisable ... http://codepen.io/anon/pen/rxPbKQ

Il faut te tourner vers javascript pour bien contrôler l'un ou l'autre de ces effets.

Merci

arrivé "auto" pas possible, je m’en doutais un peu, je vais personnalisé mes animations en fonction des hauteurs des "div". c’est déjà bien, çarend les pages moins statiques.

je vais pas me disperser maintenant à faire du javascript tant que le CaSSe-tête en reste un
il reste tant de trucs à voir...

Bonne journée !

Mmmm !
je comprend la notion de « compromis » citée plus haut

[résolu]