1

我有以下CSS：

.makebig {
    -webkit-animation-name: cssAnimation;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
    from {
        -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    }
    to {
        -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(150px);
    }
}
.makesmall {
    -webkit-animation-name: cssAnimation1;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation1 {
    from {
        -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(150px);
    }
    to {
        -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    }
}

而这个Javascript：

<script>
    function ani(fns1) {
    if (document.getElementById('fns1').getAttribute('clicked') == 'false') 
    {
        document.getElementById('fns1').className = 'makebig';
        document.getElementById('fns1').setAttribute('clicked', true);
    } else { 
        document.getElementById('fns1').className = 'makesmall';
        document.getElementById('fns1').setAttribute('clicked', false);
    }
}
</script>

该代码将对象缩放两次。如何根据对象发送不同的“比例”参数？

我用它来放大图像并在第二次点击时转到原始比例。我的图像在文本中具有不同的大小和位置，因此我需要使它们在屏幕中心缩放。

4

2 回答 2

2

一种选择是使用过渡而不是动画

.makebig {
    transition: 1s transform ease;
}

然后您可以使用 js 分别在每个元素上设置所需的结束变换，浏览器将相应地对其进行动画处理

于 2013-05-20T16:03:03.393 回答
1

您可以硬编码几个 css 类和动画以满足您的需求：

@-webkit-keyframes scale-1 {
    from {
        -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    }
    to {
        -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(150px);
    }
}


@-webkit-keyframes scale-2 {
    from {
        -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(0px);
    }
    to {
        -webkit-transform: rotate(0deg) scale(3) skew(0deg) translate(150px);
    }
}

#element {
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}
#element.scale-1 {
    -webkit-animation-name: scale-1;
}

#element.scale-2 {
    -webkit-animation-name: scale-1;
}

并且只是处理来自 js 的类名：

element.className = 'scale-1';
// after some logic
element.className = 'scale-2';
于 2013-05-20T16:05:08.573 回答