Avatar
Petr Čech (czubehead):

Č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
Why so serious? -Joker
Avatar
Petr Čech (czubehead):

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
Why so serious? -Joker
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.