0

使用 wordpress，我有一个页面模板（所以我可以在 PHP 中工作），我添加了一个样式标签。我需要使用变量控制高度和宽度，以便我的网站具有响应性。我知道以下内容不起作用，但我试图解释我的心态。如果我可以在 php 中创建一个变量，然后每次都回显该变量的高度并在下面进行修改，那将是完美的 - 除了我遇到了明显的问题，即我无法通过 php 获取窗口高度，因为它是服务器端，并且我不能包含 jquery在样式标签中。为任何愚蠢道歉，我只是想解释我的思维过程，并欢迎指出任何方向！谢谢

@-webkit-keyframes custom_animation {
        <?php $test = '<script>$(window).height()</script>'; ?>
    0% {
        -webkit-transform: translate(0%, <?php echo $test; ?> ) scale(.7); 
    }

    37% { 
        -webkit-transform: translate(17%, 171%) scale(1);
    }

    44% { 
        -webkit-transform: translate(19%, 175%) scale(1);
    }
    50% {
        -webkit-transform: translate(15%, 161%) scale(1); 
    }

    100% {
        -webkit-transform: translate(20%, 151%) scale(1); 
    }
4

1 回答 1

2

您可以使用 jQuery 的animate()属性为 CSS 样式设置动画。您会注意到，尽管此属性无法自行处理某些更新/高级 CSS 样式（例如转换）...您可以通过设置其他内容（例如数字）的动画来解决此问题，然后使用该数字应用 CSS ，反复，在整个动画过程中：

var elem = $('.element-class');
$({num: 0}).animate({num: 100}, {
    duration: 1000,
    step: function(now) {
        elem.css({
            transform: 'translate(0%, '+now+'%)'
        });
    }
});

这允许您在对象中创建您的值，然后用于step在动画的每个“步骤”设置 CSS 声明。

http://jsfiddle.net/X8SYg/

更新

作为对您的评论的回应，您可以使用不同的方法来提供多个参数，以及将多个动画阶段链接在一起。我将引导您完成它，最后有一个最终演示：

var x, y, s, count;
x = 0;
y = $(window).height();
s = 0.7;
count = 1;

您将需要许多变量来存储内容......您正在操作的每个属性一个变量，以及一个变量来存储您在动画的哪个步骤。

function animate(newX,newY,newS,duration){
    $({x: x, y: y, s: s}).animate({x: newX, y: newY, s: newS}, {
        duration: duration,

我创建了一个函数来环绕动画块，这样我就可以随时调用它，将新值传递给动画。初始对象使用变量设置起点，这些变量存储每个属性的当前值。结束状态对象使用通过函数调用传入的值，持续时间也是如此。

        complete: function(){
            if(count < aq.length){
                animate(aq[count][0],aq[count][1],aq[count][2],aq[count][3]);
                count++;
            }
        },

我还添加了这个回调函数，它在动画的每一步完成后运行。这个函数基本上用我已经存储在一个数组中的新变量重新调用动画函数。我将在最后循环回来解释这一点。

        step: function(now,fx) {
            if(fx.prop == 'x')
                x = now;
            if(fx.prop == 'y')
                y = now;
            if(fx.prop == 's')
                s = now;
            $('div').css({
                transform: 'translate('+x+'%, '+y+'%) scale('+s+')'
            });
        }

和之前一样，该step函数设置了 css 声明。但这次我们也使用了该函数提供的fx对象。step该函数基本上单独遍历每个属性，因此您可以使用fx.prop它查看当前正在运行的属性，然后相应地更新您的变量。

// animation queue
var aq = [
    [17,171,1,3700],
    [150,75,2,700],
    [15,261,1,600],
    [200,51,4,5000]
];

您可以将动画队列构建为多维数组。基本上，一个存储一组数组的数组，这些数组又存储动画每个步骤的所有值（x，y，s，duration）。

如果你回顾回调函数，你现在可以看到这些是如何实现的......每次调用它时，它都会使用count变量来查看我们在哪一步，然后从该数组中获取所有值并将它们传递给函数。我在这里做同样的事情：

animate(aq[0][0],aq[0][1],aq[0][2],aq[0][3]);

这是对该animate函数的第一次调用，它使事情开始运转。

查看整个演示，全部放在此处：

http://jsfiddle.net/5GWxX/3/

请注意，我根据您的百分比停止点设置持续时间。3700 代表 10 秒的 37%。

我已经将您的数字更改了一些，以使动画更加引人注目。请记住，翻译百分比与元素的大小相关，因此移动 10% 左右并不是很大，除非您的元素非常大。我假设你已经测试了你的 CSS 动画并且知道它们在做什么！

希望对你有帮助，祝你好运！

于 2013-11-03T05:44:04.737 回答