Avatar billede htx98i17 Professor
06. juni 2017 - 21:29 Der er 9 kommentarer og
1 løsning

transition og animation

Jeg vil gerne have en div til at stå og "hoppe", hvilket animationen sørger for, men når man klikker på div, så skal animationen pause og transition gøre height højere.

Det ser ud til at transition konflikter med animation.

Kan nogen forklare hvorfor og evt foreslå en løsning?



<!DOCTYPE html>
<html>
<head>
<style>
label {
display: block;
    width: 100px;
    height: 100px;
    background-color: red;
   
    -web-transition:    height 0.5s;
    -web-transition-delay:    0.5s;
    transition:        height 0.5s;
    transition-delay:    0.5s;
   
    animation-name: aabningstider;
    animation-duration: 2.0s;
    animation-iteration-count: infinite;

    -web-animation-name: aabningstider;
    -web-animation-duration: 2.0s;
    -web-animation-iteration-count: infinite;

}

@keyframes aabningstider {
    0% {height: 100px;}
    10% {height: 102px;}
    20% {height: 100px;}

}

@-web-keyframes aabningstider {
    0% {height: 100px;}
    10% {height: 102px;}
    20% {height: 100px;}

}

#box:checked + label {
   
    animation-play-state: paused;
    -web-animation-play-state: paused;
   
    height:            210px;

}

</style>
</head>
<body>

<input type="checkbox" id="box">
<label for="box"></label>


</body>
</html>
Avatar billede Slettet bruger
07. juni 2017 - 00:15 #1
javascript, og objekt/sprite
Avatar billede htx98i17 Professor
07. juni 2017 - 07:39 #2
Ved du med sikkerhed at det ikke kan klare med kun CSS?
Avatar billede Slater Ekspert
07. juni 2017 - 10:15 #3
Ser ud til at virke, hvis du samtidig sætter "animation-name: none;" i din #box:checked + label
Avatar billede htx98i17 Professor
07. juni 2017 - 18:08 #4
tak for buddet. det stopper rigtig nok animationen med at hoppe, men ved mig er der dog ingen transition tilbage til udgangspunktet
Avatar billede htx98i17 Professor
07. juni 2017 - 18:14 #5
Der er faktisk slet ikke nogen transition.

Jeg har så også forsøgt med at lave 2 animationer, men jeg ved ikke hvordan man får animationen der erstatter transition til at gå tilbage til udgangspunktet når inputboxen deselectes
Avatar billede Slater Ekspert
11. juni 2017 - 16:58 #6
Har du løst dette? Jeg er ikke sikker på jeg helt forstår hvad du vil have den til.
Avatar billede htx98i17 Professor
12. juni 2017 - 16:18 #7
Tak for du lige følger op.

Det er egentlig bare en container der med en animation skal stå og "hoppe" lidt for at vise at der er noget "i boksen". Når man så klikker på den, skal der ske 2 ting. Animationen skal stoppe og containeren udvide sig vertikalt med en transition eller en animation. Når der klikkes igen, skal transition eller animationen få containeren tilbage til udgangspunktet og animationen skal sætte containeren igang med at hoppe igen.

jeg håber det afklarede det lidt, ellers spørg gerne igen.

Uden javascript :)
Avatar billede Slater Ekspert
12. juni 2017 - 17:25 #8
Ah ja, selvfølgelig. Den overså jeg. Det giver et problem, fordi vi gerne vil behandle den ikke-markerede tilstand på to forskellige måder, an på om den har været markeret før eller ej - og CSS har slet ikke sådanne muligheder.

Jeg tror dog jeg har fundet en brugbar løsning med transforms i stedet. Se her:
https://jsfiddle.net/1fvkd917/
Avatar billede htx98i17 Professor
12. juni 2017 - 17:45 #9
aahh okay, så problemet var at jeg ville definere height både i en transition og i animation.

Og nu bruger vi height i transition og transform i en animation - og derfor konflikter det ikke?

Dit eksempel virker i hvert fald fint.
Det er fedt al det man efterhånden kan lave blot med html og css, hvor man ikke behøves at blande JS ind i det.
Avatar billede htx98i17 Professor
12. juni 2017 - 17:46 #10
Hvis du er en haj til mysql så se meget gerne mit andet ubesvarede spørgsmål. Den er der åbenbart ikke nogen der tør byde på ;-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester