Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 80% výuky zdarma!
https://www.itnetwork.cz/csharp
Avatar
Petr Čech
Redaktor
Avatar
Petr Čech:27.11.2015 16:33

Čau, napsal jsem si následující mixin, který má za úkol při :hover zavolat animaci a při odjetí myši z elementu pustit animaci pozpátku

$keyframes-speed-normal=0.5s;
@mixin animate-hover($keyframes-name) {
  @keyframes #{$keyframes-name} {
    @content;
  }
  @-webkit-keyframes #{$keyframes-name} {
    @content;
  }
  @-moz-keyframes #{$keyframes-name} {
    @content;
  }
  @-o-keyframes #{$keyframes-name} {
    @content;
  }

  animation: $keyframes-name $keyframes-speed-normal linear forwards reverse;
  -webkit-animation: $keyframes-name $keyframes-speed-normal linear forwards reverse;
  -moz-animation: $keyframes-name $keyframes-speed-normal linear forwards reverse;
  -o-animation: $keyframes-name $keyframes-speed-normal linear forwards reverse;

  &:hover {
    animation: $keyframes-name $keyframes-speed-normal linear forwards normal;
    -webkit-animation: $keyframes-name $keyframes-speed-normal linear forwards normal;
    -moz-animation: $keyframes-name $keyframes-speed-normal linear forwards normal;
    -o-animation: $keyframes-name $keyframes-speed-normal linear forwards normal;
  }
}

a použití

@include animate-hover(nav-key){
    from {
      background: white;
    }
    to {
      background: brown;
    }
  }

jednotlivé vlastnosti se sice změní, ale okamžitě.
netušíte někdo, jak to udělat tak, aby to fungovalo?
Díky.

Odpovědět
27.11.2015 16:33
the cake is a lie
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Petr Čech
Redaktor
Avatar
Petr Čech:27.11.2015 16:56

Už to mám, udělal jsem ošklivý hack, který prostě funguje :D

@mixin animate-hover($keyframes-name) {
  @keyframes #{$keyframes-name} {
    @content;
  }
  @-webkit-keyframes #{$keyframes-name} {
    @content;
  }
  @-moz-keyframes #{$keyframes-name} {
    @content;
  }
  @-o-keyframes #{$keyframes-name} {
    @content;
  }
  @keyframes #{$keyframes-name} {
    @content;
  }

  animation: $keyframes-name $keyframes-speed-normal linear forwards reverse;
  -webkit-animation: $keyframes-name $keyframes-speed-normal linear forwards reverse;
  -moz-animation: $keyframes-name $keyframes-speed-normal linear forwards reverse;
  -o-animation: $keyframes-name $keyframes-speed-normal linear forwards reverse;

  $keyframe-back:#{$keyframes-name}-back;

  @keyframes #{$keyframe-back} {
    @content;
  }
  @-webkit-keyframes #{$keyframe-back} {
    @content;
  }
  @-moz-keyframes #{$keyframe-back} {
    @content;
  }
  @-o-keyframes #{$keyframe-back} {
    @content;
  }
  @keyframes #{$keyframe-back} {
    @content;
  }

  &:hover {
    animation: $keyframe-back $keyframes-speed-normal linear forwards normal;
    -webkit-animation: $keyframe-back $keyframes-speed-normal linear forwards normal;
    -moz-animation: $keyframe-back $keyframes-speed-normal linear forwards normal;
    -o-animation: $keyframe-back $keyframes-speed-normal linear forwards normal;
  }
}
Akceptované řešení
+5 Zkušeností
Řešení problému
Nahoru Odpovědět
27.11.2015 16:56
the cake is a lie
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.