web-dev-qa-db-fra.com

Glissez-vous vers le bas sur clic Pure CSS?

J'ai trouvé ce post Comment créer une DIV coulissante sur un clic?

Mais toutes les réponses sont des méthodes Jquery. Est-il possible de créer cela avec PURE CSS? J'ai quelques autres choses à l'esprit aussi ...

  1. Que puis-je ajouter pour que la diapositive inférieure reste en place lors du défilement
  2. Modifiez le lien qui déclenche l'animation en "Fermer" afin de faire glisser la div en arrière

Voici un lien vers l'exemple de cet article // http://shutterbugtheme.tumblr.com/

J'ai aussi essayé de googler mais les seuls résultats sont des méthodes jquery ...

csscss3animationhtmlslidedown
6
KXXT

Cela peut être fait, bien que ce soit un peu un bidouillage. Les deux éléments qui conservent l'état (désignés dans CSS comme étant: cochés) sont les éléments de case à cocher et de bouton radio. Donc, si vous associez une case à une étiquette à l'aide d'un attribut for et ajoutez un div, vous pouvez obtenir un résultat en lisant le statut du bouton (masqué):

<div class=window>
<input type=checkbox class=toggle id=punch>
<label for=punch>Punch It, Chewie<label>
<div><p>Here’s my content. Beep Boop Blurp.</p></div>
</div>

Et le CSS:

input.toggle { display: none; }
input.toggle ~ div { height: 0px; margin: .2rem; overflow: hidden; }
input.toggle:checked ~ div { height: 180px; }

Une explication supplémentaire et un exemple incluant un effet d'ouverture/fermeture animé .

9
Dudley Storey

Ceci est impossible en CSS pur pour reconnaître un clic. Vous pouvez le faire avec: survol et une transition, mais c'est aussi proche que vous allez obtenir sans javascript.

.hover
{
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.slide
{
    position: absolute;
    top: 0;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
}

.hover:hover + .slide
{
    top: 50px;
}

http://jsfiddle.net/Kyle_/MaMu9/1/

Sachez cependant que les transitions sont CSS3 et ne fonctionneront pas dans IE <9 et versions antérieures de meilleurs navigateurs. 

Edit: après la publication d’une autre réponse à l’aide de la propriété: focus en CSS: c’est possible avec une mise en garde: vous devez cliquer en dehors de l’élément qui le fait glisser pour le faire glisser, sinon cela fonctionne bien.

Sachez que l’élément doit avoir tabindex = '1' (ou n’importe quel nombre ayant un sens en fonction de l’emplacement de l’élément dans le document) pour que cela fonctionne.

.hover:focus + .slide
{
    top: 50px;
    -webkit-transition: top 1s;
}

http://jsfiddle.net/Kyle_Sevenoaks/MaMu9/1/

6
Kyle

Vous pouvez reconnaître un événement 'focus' sur un élément et agir sur celui-ci à l'aide d'une transition CSS.

Voici un exemple qui déplacera un div 50px lorsque vous cliquez dessus

Balisage 

<div tabindex='1' id='box'></div>​

CSS

#box {
 background-color:#3a6d90;
 width:100px; height:100px;    

 transition: margin-top 2s;
 -moz-transition: margin-top 2s; /* Firefox 4 */
 -webkit-transition: margin-top 2s; /* Safari and Chrome */
 -o-transition: margin-top 2s; /* Opera */
}

#box:focus {
 margin-top:50px;
 outline:0;
}

Exemple de travail: http://jsfiddle.net/NBHeJ/

3
lostsource

Ceci est un bon exemple de la façon de commencer. Vous pouvez voir en bas, ils publient le source de la fonction animée qu’ils utilisent, bien que ce soit javascript.

glissant-js-generic

Si vous voulez du css pur, je dirais que ws3schools est une excellente ressource depuis de nombreuses années, mais sachez que le support du navigateur dépend beaucoup de l’effet de l’effet souhaité.

w3schools-css

Structure de base pour obtenir l’effet qu’ils ont, il vous suffit de travailler selon les lignes de deux div dans le corps, en haut masqué et que le conteneur est visible, puis d’animer l’animation du div masqué pour afficher le fait de pousser l’autre div vers le bas, en gardant les deux en ligne.

<body>
 <div id="hidden-div"></div>
 <div id="main-content-div"></div>
</body>
2
Calvin

Cela peut être fait en utilisant la pseudo-classe target pour détecter le clic.

Définissez le bouton href sur l'id du div glissant.

Le glissement vers le bas peut ensuite être effectué en définissant la hauteur de la div glissante sur la classe de glissement slideDiv: target en utilisant une variable css3 transition sur la hauteur.

Je ne pense pas qu'il soit possible pour le bouton d'origine de changer son href pour fermer la div glissante en utilisant du css pur, mais vous pouvez toujours ajouter un bouton de fermeture sur la div glissante pour le fermer.

Ce bouton de fermeture fonctionne en ajoutant la même transition à la classe div glissante.

Voici uneDEMO DE TRAVAIL.

Prendre plaisir.

1
Danield

Une autre façon de faire la même chose:

.contents {
  background: yellow;
  color: rgba(0, 0, 0, .8);
  padding: 20px;
  margin:0;
}
.slide-up, .slide-down {
  overflow:hidden;
}
.slide-up > div, .slide-down > div {
  transform: translateY(-100%);
  transition: .4s ease-in-out;
}
.slide-down > div {            
  transform: translateY(0);
}

Exemple de travail: https://jsfiddle.net/webarthur/3ep33h5s/1/

0
Arthur Araújo

Exécutez ce code.

input {
  display: none;
}

label {
  cursor: pointer;
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid;
  border-radius: 4px;
  background: tomato;
  color: #FFF;
  font-family: arial;
  -webkit-transition: background-color 0.1s, color 0.1s;
}

label:hover {
  background: #blue;
  color: #blue;
}

.test {
  -webkit-transition: height .3s ease;
  height: 0;
  overflow: hidden;
  width: 200px;
  background: tomato;
  margin-top: 10px;
  color: #FFF;
}

input:checked + .test {
  height: 100px;
}
<label for="check">Click me</label>

<input id="check" type="checkbox">

<div class="test">
  <p>I am some hidden text</p>
</div>

0
Sedric Heidarizarei

Facile:

.contents {
  background: yellow;
  color: rgba(0, 0, 0, .8);
  padding: 20px;
  margin:0;
}
.slide-up, .slide-down {
  overflow:hidden
}
.slide-up > div, .slide-down > div {
  margin-top: -25%;
  transition: margin-top 0.4s ease-in-out;
}
.slide-down > div {            
  margin-top: 0;
}

Exemple de travail: https://jsfiddle.net/webarthur/3ep33h5s/

0
Arthur Araújo