NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Petr Čech
Tvůrce
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
Avatar
Petr Čech
Tvůrce
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.