18041 sujets

Questions générales et questions de débutants

Pop up et fade out en femeture

Salut à tous,
Je travaille actuellement sur mon site. La visite du site passe par une page d'accueil avant d'accéder au reste du site.
J'ai ceci qui me pose problème:
 opacity:0;
    -webkit-transition: all 2s ease out;
  -moz-transition: all 2s ease out;
  -ms-transition: all 2s ease out;
  -o-transition: all 2s ease out;
  transition: all 2s ease out;

Ce que j'aimerais, c'est que la page d'accueil (c'est en fait un pop up) se ferme en fade out. SI j'augmente les valeurs sur ce que j'ai mis en citation je fais le fade out aussi à l'ouverture.

Je n'ai pas trouvé les paramètres qui me permettraient d'avoir le fondu à la fin uniquement.
Avez-vous une idée ?
Merci
Hello !

D'après ce que j'ai pu comprendre, l'affichage de ta "popup d'accueil" se fait en JS. Si c'est bien le cas, il te faut en fait enlever la transition au moment où tu souhaites faire apparaître la popup et la remettre au moment où la popup est censée disparaître.

Apparition :
opacity: 1;
transition: none;


Disparition :
opacity: 0;
transition: opacity 2s;

Le plus simple serait d'utiliser une classe CSS que tu ajouterais/enlèverais à la popup pour la faire apparaître/disparaître
Modérateur
Bonjour,

Alors en fait, le "ease-out" (qui s'écrit avec un "-" d’ailleurs) ne veut pas dire que c'est juste à la fermeture de ta popup et pas a l'ouverture. Il s'agit la de l'animation. La transition est appliqué tout le temps à chaque fois qu'il y a un changement et le "out" signifie que la fin de ton animation va être ralentie par rapport au début :
W3School a écrit :
ease-out : Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1))

http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp (regarde les exemple si tu veux)

Pour faire un effet de transition seulement à la fermeture j'ai trouvé un petit trick sur la toile qui consite a overider la propriété transition :
div {
    width: 100px;
    height: 100px;
    background: red;
/* Cette transition sera appliquée au "mouse out" vu que l'autre code ne sera plus appliqué */
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 300px;
/* Cette transition sera appliquée au hover (elle viendra overider directement celle déjà présente) */
    -webkit-transition: none; /* For Safari 3.1 to 6.0 */
    transition: none;
}


En fiddle : https://jsfiddle.net/mr59rz9L/

Je te laisse retravailler tout ça vu qu'on a pas spécialement d'indice sur comment tu l'appliques...

original post http://stackoverflow.com/questions/5921073/different-css-transition-delays-for-hover-and-mouseout


Bonne journée
Salut !
Non non, la pop up est en pure css !
Je mets le code:

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 20;
    right: 0;
    bottom: 0;
    left: 0;
    background: grey;
    z-index: 99999;
    opacity:0;
    -webkit-transition: all 2s ease out;
  -moz-transition: all 2s ease out;
  -ms-transition: all 2s ease out;
  -o-transition: all 2s ease out;
  transition: all 2s ease out;
    pointer-events: none;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog  div {
    width: 70%;
    position: relative;
    margin: 10% auto;
    padding: 65px 120px 103px 20px;
    background: #fff;
    
}

.close {
    background: white
    color: transparent;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: justify
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;

}

.close:hover { 
background: transparent
 }
Modérateur
gillesc123 a écrit :
Non non, la pop up est en pure css !

Oui oui ma solution aussi (mais je vais pas faire le boulot à ta place !) Smiley lol

Tiens si tu veux un exemple avec target (mais c'est exactement pareil qu'avec hover, j'ai juste remplacé hover par target) : https://jsfiddle.net/mr59rz9L/1/

à toi de jouer Smiley cligne
Salut _Laurent,

Sur l'exemple que tu donnes il y a une animation mais ce n'est pas ce que je souhaite pour ma pop up. C'est plus un effet de transparence progressive après avoir cliqué sur la croix de fermeture, si tu veux, jusqu'à disparition.
Modérateur
gillesc123 a écrit :
Sur l'exemple que tu donnes il y a une animation mais ce n'est pas ce que je souhaite pour ma pop up. C'est plus un effet de transparence progressive après avoir cliqué sur la croix de fermeture, si tu veux, jusqu'à disparition.


Alors oui j'ai fait un effet sur la largeur mais tu n'arrive vraiment pas a remplacer une transition sur la largeur par une transition sur l'opacité ? Il suffit de garder ton opacity et non pas la width... je vois pas le soucis... Tu comprend le principe du code au moins ou pas du tout ?
Bah, en bidouillant j'arrive toujours à des trucs, mais je ne suis pas codeur, mon approche est superficielle.
Je change un truc, je vois le résultat, c'est comme ça que je procède pour comprendre le fonctionnement d'un code.
.
Modérateur
Aïe... je vois... mais la tu touche a des trucs assez pointu quand même.... ya un moment ou il va falloir revoir un peu les base pour comprendre ce que tu fais ! Smiley lol tu gagnera en compétence et rapidité d’exécution et le code sera plus propre...

Ton transition: all; fait en sorte que dès que tu change un truc en css ça l'anime. Toi tu change l'opacity avec ton :
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

moi j'ai changé la width. C'est tout. il suffit de garder ton opacity et de rajouter transition: none;
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
    transition: none;
}
Modérateur
Bguigui67 a écrit :
Voilà une solution : http://codepen.io/TheTeapot418/pen/mEWWKQ

Exectement ça. Mais c'est trop mâché à mon gout, je préfère faire bosser un peu les gens en expliquant mais sans fournir de code à copier coller... pour fait up un peu le niveau des gens et surtout qu'ils comprennent Smiley murf

Bguigui67 a écrit :
EDIT: Pardon _laurent, je n'avais pas vu que tu avais donné une solution similaire plus haut
Aucun soucis, t'excuse pas, vaut mieux deux réponse que 0 et il sera certainement plus heureux avec ton code qu'avec mes explications Smiley lol

Bonne journée a vous deux
_laurent a écrit :

Aucun soucis, t'excuse pas, vaut mieux deux réponse que 0 et il sera certainement plus heureux avec ton code qu'avec mes explications Smiley lol


Maintenant, il a les explications détaillées et la solution. Que demander de plus ? Smiley lol

Allez, bonne journée ! Smiley biggrin
@ Bguigui: bah, c'est exactement ça comme résultat ! Merci à toi Smiley smile
@_Laurent : ne crois pas que tes conseils ne m'interpellent pas ! Mais j'ai très peu l'occasion de toucher à du code et comme ça va très vide, je suis largué. Bon, ça c'est l'excuse bidon que j'avoue, si je suis honnête. Mais faire appel à des geeks ça fait gagner un temps fou. Regarde: Bguigui donne la soluce alors que j'ai passé une journée entière à chercher sur google la solution hyper simple que j'ai pas trouvé !
Modérateur
gillesc123 a écrit :
Mais faire appel à des geeks ça fait gagner un temps fou. Regarde: Bguigui donne la soluce alors que j'ai passé une journée entière à chercher sur google la solution hyper simple que j'ai pas trouvé !
Héhé je comprend très bien la solution de facilité t'en fait pas Smiley smile Mais tu reste dépendant. A chaque fois que tu fait un truc tu sera obligé de demander de l'aide ou de galérer pendant des heure, tu n'est pas sur de ce que tu fais etc etc. Mais c'est juste une philosophie Smiley cligne
Dépendant d'un geek ou d'un tuto, pour moi c'est un peu la même chose. Pour faire le site web à Tatie Danielle que personne verra sauf elle, pas la peine de mettre les mains dans le cambouis jusqu'au coude. Smiley smile )
C'est pas de la philosophie, c'est de la fainéantise Smiley smile )
Modérateur
gillesc123 a écrit :
Pour faire le site web à Tatie Danielle que personne verra sauf elle, pas la peine de mettre les mains dans le cambouis jusqu'au coude
Hahahaha oui là effectivement je plussoie Smiley lol
Sujet clos
Aller à