3

コンパス アニメーションを使用しようとしていますが、機能していないようです。

私のファイルの設定方法は次のとおりです。

Config.rb

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

Screen.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;
}

索引.html

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

これは私の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;
}

ただし、機能していないようです。誰かが私が間違っていることを説明できますか? ありがとう！

4

1 に答える 1

5

これが機能するためには、期間が必要だと思います。それはREADMEの間違いです。

(コンパス アニメーションは、0.13 リリースのコンパス コアに移行するため、実際にはもはや維持されていないことにも注意してください。代わりに、コンパスのマスター ブランチとコンパス アニメーションを使用することをお勧めします。それらはより適切に維持されます。)

于 2012-12-16T23:32:55.020 に答える