0

我正在尝试从 0.5 - 1 设置动画比例。当第一次添加 div 时，我添加 css 以将其缩放到 0.5，然后我在元素 css 上将其缩放回 1。

     $('.item').each(function(count){
        $(this).css({top: 0, left:20, transform : "scale(.5)"});
    });

CSS

.item {
  -webkit-transition: top 0.4s ease-out 0s, left 0.4s ease-out 0s, right 0.4s ease-out 0s;
     -moz-transition: top 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, right 0.5s ease-in-out 0s;
       -o-transition: top 0.4s ease-out 0s, left 0.4s ease-out 0s, right 0.4s ease-out 0s;
      -ms-transition: top 0.4s ease-out 0s, left 0.4s ease-out 0s, right 0.4s ease-out 0s;
          transition: top 0.4s ease-out 0s, left 0.4s ease-out 0s, right 0.4s ease-out 0s;

  transform: scale(1) ease-in-out 0s;   
  -moz-transform: scale(1) ease-in-out 0s;
}

为什么这行不通。它保持在 0.5 并且不动画到 1

这种风格也没有动画。

-moz-transform: scale(.4) 2s ease-in-out 4s;

我正在使用 Firefox 不应该那样工作。还是我把它写成不正确的速记

4

1 回答 1

1

首先，我认为通过 jquery css 函数设置转换不会应用特定于浏览器的样式（-webkit、-moz-、-o、-ms），这意味着它们可能无法在当今的大多数浏览器上运行.

其次，通过style元素上的属性使用 JS 设置样式称为 aninline style并覆盖任何 css 类/选择器。我认为这不会造成问题。

你需要的是 2 节课。一个已经有 0.5 的比例，然后在加载时使用 JS 应用第二个类。另一种方法是使用 CSS 关键帧。http://www.w3schools.com/cssref/css3_pr_keyframes.asp

于 2012-09-19T20:35:06.827 回答