5

当用户第一次查看页面时，我使用-webkit-animation属性将表单元素旋转到它们的位置。

我使用以下代码来实现：

.bounce {
    -webkit-animation-name: bounceup;
}


@-webkit-keyframes bounceup {
    from {
    opacity:0.5;
    -webkit-transform: translateY(100px) rotate(180deg);
    -webkit-box-shadow: 20px 20px 80px #000;
    }
    to {
    opacity:1;
    -webkit-transform: translateY(0px) rotate(0deg);
    }
}

服务器端代码是PHP。在我的 php 类的每个表单元素中，我有一个类“bounce”，我添加了一个名为的内联属性-webkit-animation-duration，我在每个 for 元素之间增加了 0.18。

php代码：

private $animationDuration=0.7;

private function _getAnimationDuration() {
    $ret= '-webkit-animation-duration: '.$this->animationDuration.'s';
    $this->animationDuration+=0.1;
    return $ret;
}

_getAnimationDuration()在这里，我使用函数的结果为每个表单元素添加一个名为“样式”的属性。

问题是：我可以使用纯 CSS3 和 HTML5（不使用 JavaScript）以某种方式实现 _getAnimationDuration() 函数吗？

我想添加每个表单元素之间不同的动画持续时间 css 样式。每一个都增加了相同的数量。

4

2 回答 2

1

如果您可以假设所有元素在 DOM 树中处于同一级别，那么您可以在 CSS 中实现这一点。但是您必须预先决定您愿意支持的最大元素数量，因为您需要为每个潜在元素编写 CSS。

例如，要支持最多四个元素，您可以执行以下操作：

.bounce { animation-delay:0s; }
.bounce ~ .bounce { animation-delay:0.1s; }
.bounce ~ .bounce ~ .bounce { animation-delay:0.2s; }
.bounce ~ .bounce ~ .bounce ~ .bounce { animation-delay:0.3s; }

第一个“反弹”元素只是延迟 0 秒。一个 'bounce' 元素前面有另一个 'bounce' 元素（即它是第二次出现），将获得 0.1 秒的延迟。一个 'bounce' 元素前面有两个其他 'bounce' 元素（即它是第三个），将获得 0.2 秒的延迟。等等。

显然，您想要支持的元素越多，这些选择器就会变得越长。因此，如果您需要在表单上支持大量输入，CSS 可能会变得有些笨拙，但这是可能的。

像 SASS 或 LESS 这样的预处理器可以使 CSS 的生成更容易，但输出仍然会相当大。

例如，您可以在 SASS 中执行以下操作：

@mixin generateDelays($class,$increment,$count) {
  $selector: ".#{$class}";
  $delay: 0s;
  @while $count > 0 {
    #{$selector} { animation-delay:$delay; }
    $selector: "#{$selector} ~ .#{$class}";
    $delay: $delay + $increment;
    $count: $count - 1;
  } 
}

@include generateDelays('bounce',0.1s,10);
于 2013-04-30T03:22:13.310 回答
0

总结评论：

现有的解决方案本质上是 HTML5/CSS3；借助 PHP 的后端辅助来动态生成 CSS3 样式。

仅使用 HTML5 和 CSS3 无法实现参数化或动态 CSS 样式。LESS 或 Sass 可以利用 JavaScript 和库编译来接近所需的结果。

于 2012-10-26T17:50:49.300 回答