除了最初，如何使css元素具有过渡?

问题描述

如果我的CSS样式如下:

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;
}

和以下html:

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

和以下jQuery:

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

然后，页面加载时仍然存在从0px到50px的过渡，尽管事实上直到在jQuery中设置了css left属性之后，过渡类才添加到mydiv中.

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.

我希望能够在页面加载时设置mydiv的初始css left属性(它是根据各种参数计算的)，并且不设置动画，但仍设置了transition属性用于初始页面加载后(在页面加载后移动mydiv应该设置动画).

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).

我该怎么做?

推荐答案

您可以在dom准备就绪时应用位置，并在页面加载时应用过渡.试用这把小提琴.

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');
});

您需要在应用这两种样式之间进行分隔.您可以使用setTimeout来实现相同的效果.

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

这篇关于除了最初，如何使css元素具有过渡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！