javascript - Css3 Webkit css 动画 : resize a div rectangle

Question

我试图了解是否可以使用 webkit 动画在 Jquery 中复制方法 animate

假设我有一个 50px x 50px 的 div 使用 jquery，我可以轻松地调整大小并使用以下方式设置动画:

$('#mybox').animate({'width':'100px','height':'70px'}, 300) 

// so from 50x50 it animates to 100x70 
// the values 100 and 70 should ba dynamically 
// input so i can create a function (Width,Height) to alter my box

我想知道如何做同样的事情，如果可能的话使用 CSS WebKit 动画

附言。我不需要它们在 firefox 中工作，只是一个 Safari/Chrome 的元素

Answer 1

你可以使用这个 CSS:

div.mybox {
    width: 50px;
    height: 50px;
    background-color: red;
    -webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    -moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    -o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    transition:width 300ms ease-in-out, height 300ms ease-in-out;
}

然后您可以使用 jQuery 更新宽度和高度属性:

$(document).ready(function() {
    $("div.mybox").css({"width": "100px", "height": "70px"});
});

因此，如果浏览器支持，这将是动画的。但是，当然，可以考虑将这些属性放在一个单独的类中，并将此类添加到元素中。您可以像这样使用 .addClass() 函数。

$(document).ready(function() {
    $("div.mybox").addClass("enlarged");
});

或者，例如，您可以将其与toggleClass函数和点击事件一起使用(点击时框会放大，再次点击时会变为正常大小)。

$(document).ready(function() {
    $("div.mybox").click(function() {
        $(this).toggleClass("enlarged");
    });
});

在这种情况下，应该在 CSS 类中定义属性。

div.mybox.enlarged {
    width: 100px;
    height: 70px;
}

此外，如果您希望动画在鼠标悬停时发生，那么您只需添加以下内容:

div.mybox:hover {
    width: 100px;
    height: 70px;
}

这种动画完全不用JS就可以实现。

此外，您应该阅读有关 CSS3 transition attribute 的内容和转换功能(它们在许多情况下都可用)。它们被描述为 here .