如何将 Compass Animation 用于 Compass SCSS 框架？答案

【问题标题】：How to use Compass Animation for Compass SCSS framework?如何将 Compass Animation 用于 Compass SCSS 框架？
【发布时间】：2013-09-23 19:51:42
【问题描述】：

我正在尝试使用compass animation，但它似乎不起作用。

这是我的文件的设置方式：

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

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

但是，它似乎不起作用。有人可以解释我做错了什么。谢谢！

【问题讨论】：

不工作怎么办？生成的 CSS 不正确？
@cimmanon。当我加载页面并将鼠标悬停在元素上时，没有任何反应。所有的浏览器都试过了，都没有！

标签： css sass compass-sass

【解决方案1】：

我认为需要持续时间才能使其正常工作。这是 README 中的错误。

（您还应该注意，Compass Animation 并没有真正得到维护 - 因为它正在进入 Compass Core 0.13 版本。我建议使用 Compass 的 master 分支，并改用 Compass-Animate。那些更好维护。）

【讨论】：

如何使用内置动画的持续时间。我已经阅读了似乎无法解决问题。另外，Compass 0.13 是否可以安全使用，因为它仍处于 Alpha 阶段？如果我切换，我是否必须进行大量更改才能使我的文件正常工作？是否有任何资源可以对此进行更多解释。我四处寻找，但没有真正找到任何东西。感谢您提供的任何帮助！
内置动画被简单地命名为关键帧集，并采用与您创建的任何其他动画相同的持续时间参数：@include animation(flipOutY 300ms); 或 animation-name(flipOutY); animation-duration(300ms);。 0.13 alpha 实际上有点过时了，所以除非你愿意直接使用 master 分支，否则我可能说得太早了。：）对不起。如果 compass-animations 工作正常，请坚持到 0.13 得到更新。
Compass 0.13 什么时候来？
没有设定日期。希望很快。
亲爱的@EricMeyer，compass 中会默认显示动画 mixin，还是必须单独安装 compass-animate 插件？（我问这个是因为 repos: animation 和 animate 上的自述文件有些混乱，我无法理解它们）另外，关于 compass 0.13 何时发布的任何线索？只是问，没有压力:)