如何让 css 元素除了最初之外还有过渡？

发布于 2024-12-09 08:28:46 字数 666 浏览 0 评论 0原文

如果我有一个如下的 css 样式：

.transition {
    transition: left linear .4s;
    -moz-transition: left linear .4s;
    -o-transition: left linear .4s;
    -webkit-transition: left linear .4s;
}

和下面的 html:

<div id="mydiv">Test</div>

以及下面的 jQuery:

$(function () {
    $('#mydiv').css('left', '50px');
    $('#mydiv').addClass('transition');
});

那么当页面加载时仍然有一个从 0px 到 50px 的过渡，尽管事实上过渡类直到之后才添加到 mydiv css left 属性在 jQuery 中设置。

我希望能够在页面加载时设置 mydiv 的初始 css left 属性（它是根据各种参数计算的）并且不进行动画处理，但仍然在之后设置过渡属性初始页面加载（页面加载后移动 mydiv 应该是动画的）。

我怎样才能做到这一点？

原文

If I have a css style that is the following:

.transition {
    transition: left linear .4s;
    -moz-transition: left linear .4s;
    -o-transition: left linear .4s;
    -webkit-transition: left linear .4s;
}

and the following html:

<div id="mydiv">Test</div>

and the following jQuery:

$(function () {
    $('#mydiv').css('left', '50px');
    $('#mydiv').addClass('transition');
});

then there is still a transition from 0px to 50px when the page loads, despite the fact that the transition class is not added to mydiv until after the css left property is set in jQuery.

I would like to be able to set the initial css left property of mydiv when the page loads (it is calculated based on various parameters) and not be animated, yet still have the transition property set for after the initial page load (moving mydiv after the page loads should be animated).

How can I accomplish this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千柳 2024-12-16 08:28:46

您可以在 dom 就绪时应用位置，并在页面加载时应用转换。试试这个小提琴。

$(function () {
    $('#mydiv').css('left', '50px');
});

$(window).load(function(){
    $('#mydiv').css('left', '100px');
    $('#mydiv').addClass('transition');
});

您需要区分应用两种样式。您可以使用 setTimeout 实现相同的效果。

You could apply the position on dom ready, and the transition on page load. Try out this fiddle.

$(function () {
    $('#mydiv').css('left', '50px');
});

$(window).load(function(){
    $('#mydiv').css('left', '100px');
    $('#mydiv').addClass('transition');
});

You need to have a separation between applying the two styles. You could accomplish the same effect with a setTimeout.

回复收藏 0 原文

~没有更多了~