Comment utiliser la Boussole d'Animation pour Boussole SCSS cadre?

Je suis en train d'utiliser la boussole de l'animation, mais il ne semble pas fonctionner.

Voici comment mes fichiers sont mis en place:

Config.rb

# Require any additional compass plugins here.
require 'animation'

Écran.scss

@import "compass";
@import "compass/reset";
@import "animation";
@import "animation/animate";
@import "animation/animate/classes";


.widget:hover {
    @include animation(flipOutY);
    background:pink;
}

body {
    background:red;
}

Index.html

<a href="#" class="widget">Click Me</a>

C'est la sortie de mon css:

@-moz-keyframes flipOutY {
/* line 79, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
0% {
-moz-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1; }
/* line 83, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
100% {
-moz-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; } }
@-webkit-keyframes flipOutY {
/* line 79, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
0% {
-webkit-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1; }
/* line 83, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; } }
@-o-keyframes flipOutY {
/* line 79, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
0% {
-o-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1; }
/* line 83, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
100% {
-o-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; } }
@-ms-keyframes flipOutY {
/* line 79, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
0% {
-ms-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1; }
/* line 83, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
100% {
-ms-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; } }
@keyframes flipOutY {
/* line 79, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
0% {
transform: perspective(400px) rotateY(0deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1; }
/* line 83, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
100% {
transform: perspective(400px) rotateY(90deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; } }
.widget:hover {
-webkit-animation: flipOutY;
-moz-animation: flipOutY;
-ms-animation: flipOutY;
-o-animation: flipOutY;
animation: flipOutY;
background: pink;
}

Cependant, il ne semble pas fonctionner. Quelqu'un pourrait-il expliquer ce que je fais de mal. Merci!

Ne fonctionne pas comment faire? Le CSS généré est incorrect?
Lorsque je charge la page et passez la souris sur l'élément, il ne se passe rien. J'ai essayé tous les navigateurs, mais rien!

OriginalL'auteur big_smile | 2012-12-15

5

Je pense que la durée est nécessaire pour que cela fonctionne. C'est une erreur dans le fichier README.

(Vous devez également noter que la Boussole de l'Animation n'est pas vraiment être maintenue plus longtemps car il se déplace dans la Boussole de Base pour 0.13 libération. Je recommande l'utilisation de la branche principale de la Boussole et de l' Boussole-Animer à la place. Ceux-ci sont mieux entretenues.)

Comment utilisez-vous la durée pour un construit dans l'animation. J'ai lu autour de par ne semble pas possible de s'en sortir. Aussi, est Boussole 0.13 sûr à utiliser, car il est toujours en Alpha? Si je passe plus de, vais-je avoir à faire beaucoup de changements pour rendre mes fichiers de travail? Existe-il des ressources qui expliquent plus à ce sujet. J'ai cherché partout mais pas vraiment trouvé quelque chose. Merci pour toute aide que vous pouvez offrir!
Les animations intégrées sont simplement nommés image-clé de jeux, et de prendre de la durée des arguments de la même façon que tout autre animation que vous créez: @include animation(flipOutY 300ms); ou animation-name(flipOutY); animation-duration(300ms);. 0.13 alpha est en fait un peu en dehors de la date, de sorte que si vous êtes prêt à utiliser la branche master directement, j'ai peut-être parlé trop vite. 🙂 Désolé. Si la boussole-animations est de travailler, de s'en tenir à cela jusqu'0.13 obtient une mise à jour.
lorsque la Boussole 0.13 va venir ?
Il n'y a pas de date fixée. Bientôt je l'espère.
Cher @EricMeyer, va l'animer mixin être présent par défaut dans la boussole, ou vais-je avoir à installer séparément la boussole-animer plugin? (Je vous pose cette question parce que le fichier lisez-moi sur le repos: animation et d'animer sont un peu confus et je ne peux pas faire assez de sens) Aussi, aucune idée de quand boussole 0.13 seront à venir? Simplement en demandant, pas de pression 🙂

OriginalL'auteur Miriam Suzanne

Vous devez vous connecter pour publier un commentaire.