Cours créez des animations css moderne

problèmes partie 3 chapitre 1 @keyframes

Sujet résolu

19 mars 2020 à 9:59:57

Bonjour,

Je suis actuellement le cours Créez des animations CSS modernes et j'en suis au 1er chapitre de la partie 3. Jusqu'à présent tout c'est bien passé y compris sur l'affichage de la barre de chargement créée à l'aide de transition. Ici j'essaye de suivre l'exemple du cours en utilisant des @keyframes mais la barre de chargement ne fonctionne pas quand on click sur le bouton. Quelqu'un peut-il m'aider à comprendre d'où vient le problème??

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>page de test</title>
    <link rel="stylesheet" href="scss/test-keyframes.css">
</head>
<body>
    <div id="container">
        <section id="test_scss">
            <div class="btn">
                Charger!
            </div>
            <div class="progress">
                <div class="progress__bar"></div> 
            </div> 
        </section>
    </div>
</body>
</html>

$cd-btn: #011c37;
$cd-box: #f2f2f2;
$cd-txt--invalid:#ffffff;
$cd-secondary:#20D17D;


$box-sizeX: 900px;
$box-sizeY: 10px;

#container {
    width: 90%;
    height: auto;
    margin: auto;
}

#test_scss{
    width: 100%;
}

.btn {
    background: $cd-secondary;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: $cd-box;
    font-size: 3rem;
    text-align: center;
    cursor: pointer;
    width: 20%;
    height: 60px;
    border-radius: 40px;
    margin-top: 500px;
    margin-left: 400px;

    &:active {
        & > .progress__bar {
        //transform: scaleX(1);
        animation: progress-bar 1000ms;
        height: 10px;
        background-color: $cd-secondary;
        } 
    } 
}

@keyframes progress-bar {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}


.progress {

    border: 2px solid $cd-btn;
    background: $cd-txt--invalid;
    padding: 3px;
    width: $box-sizeX;
    height: $box-sizeY;

    /*&__bar {
        transform-origin: left; //50%
        transform: scaleX(0);
        transition: transform 1000ms cubic-bezier(.32,0,.07,1);
    }*/
    
    margin-top: -150px;
    margin-left: 100px;
}

Bonne journée à tous!!

Mewen_bzh

19 mars 2020 à 10:14:49

Bonjour,

Quel est le contenu de ton fichier nommé "test-keyframes.css" stp ?

C'est peut-être la compilation qui se passe mal ? Merci également de préciser comment tu fais cette compilation.

Je ne réponds pas aux messages privés.

DominiqueQuaintenne1

19 mars 2020 à 13:12:14

Voici le code du fichier tes-keyframes.css, mais je ne pense pas qu'il y ait une erreur de compilation car l'interface que j'utilise me signifie parfaitement quand il y a un problème de compilation. J'utilise Koala depuis le début et il n'y a pas de problème.

#container {
  width: 90%;
  height: auto;
  margin: auto; }

#test_scss {
  width: 100%; }

.btn {
  background: #20D17D;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: #f2f2f2;
  font-size: 3rem;
  text-align: center;
  cursor: pointer;
  width: 20%;
  height: 60px;
  border-radius: 40px;
  margin-top: 500px;
  margin-left: 400px; }
  .btn:active > .progress__bar {
    animation: progress-bar 1000ms;
    height: 10px;
    background-color: #20D17D; }

@keyframes progress-bar {
  0% {
    transform: scaleX(0); }
  100% {
    transform: scaleX(1); } }
.progress {
  border: 2px solid #011c37;
  background: #ffffff;
  padding: 3px;
  width: 900px;
  height: 10px;
  /*&__bar {
      transform-origin: left; //50%
      transform: scaleX(0);
      transition: transform 1000ms cubic-bezier(.32,0,.07,1);
  }*/
  margin-top: -150px;
  margin-left: 100px; }

/*# sourceMappingURL=test-keyframes.css.map */

-
Edité par DominiqueQuaintenne1 19 mars 2020 à 13:14:14

DominiqueQuaintenne1

20 mars 2020 à 14:19:19

Résolu par moi même en essayant de comprendre pourquoi ça ne marchait pas et en tâtonnant. Il suffisait contrairement à l'extrait dans le cours de bien assigner à partir de la pseudo-classe :active du boutton à la classe .progress -> :active + .progress { & > .progress__bar ... } comme dans le code suivant :

$cd-btn: #011c37;
$cd-txt: #15DEA5;
$cd-box: #f2f2f2;
$cd-txt--invalid:#ffffff;
$cd-secondary:#20D17D;


$box-sizeX: 900px;
$box-sizeY: 10px;

#container {
    width: 90%;
    height: auto;

    margin: auto;
}

#test_scss{
    width: 100%;
    //margin: 400px;
}

.btn {
    background: $cd-secondary;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: $cd-box;
    font-size: 3rem;
    text-align: center;
    cursor: pointer;
    width: 20%;
    height: 60px;
    border-radius: 40px;
    //padding: 1.85rem 3rem;
    margin-top: 500px;
    margin-left: 400px;

    &:active + .progress {
        & > .progress__bar {
            transform-origin: left;
            animation: progress-bar 1000ms;
        } 
    } 
}

.progress {

    border: 2px solid $cd-btn;
    background: $cd-txt--invalid;
    padding: 3px;
    width: $box-sizeX;
    height: $box-sizeY;

    margin-top: -150px;
    margin-left: 100px;
      
}

.progress__bar {
    background-color: $cd-secondary;
    height: 10px;
}

@keyframes progress-bar {
    0% {
        transform: scaleX(0);   
    }
    100% {
        transform: scaleX(1); 
    }
}

Je ne suis pas encore totalement satisfait mais au moins ça fonctionne.