Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: SASS podivné chování animací v mixinu

Aktivity
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.