禁用和启用css转换到初始化位置

在JavaScript中，我想将不带转换的旋转定位到div以达到动画的起始位置（用css转换）。所以在初始位置之后，我想启用转换。禁用和启用css转换到初始化位置

我在那里做了一个codepen：http://codepen.io/3MO/pen/ZLoKbv 看来codepen不起作用，它会在我的本地，window.onload没有考虑到。

无论如何： - divs没有任何过渡属性设置。 - 根据点击的数字，我改变了divs。 - 之后，我想开始转换，所以我添加一个类到定义转换属性的div。

function onThumbnailClick(event) { 
    var index = parseInt(event.target.id.split('-')[1]); 

    //initialize the div position without transition : 
    initPortraitPanel(index); 
    //then I "activate" the transition : 
    $('.portraitDiv').addClass('active-transition'); 
    //After that I want to launch transitions... 
}  

.active-transition { 
     transition: 0.5s; 
}

的问题是，所述的div的初始定位需要即使它们被设置之后的过渡特性。

有人可以告诉我一个正确的方法来禁用初始定位过渡，然后激活过渡，所以这个初始定位不使用过渡？

谢谢！

来源

2017-02-03 Joel

您需要包括jQuery让codepen例子起作用。在将来如果有什么不工作，请在执行任何其他操作之前查看浏览器控制台;） – Archer

谢谢，我添加了它，所以现在它可以工作。 – Joel

理解你的问题真的很困难。你能解释清楚问题是什么吗？ –

添加一个超时的addClass：

function onThumbnailClick(event) { 
    var index = parseInt(event.target.id.split('-')[1]); 

    initPortraitPanel(index); 
    $('.portraitDiv').setTimeout(addClass('active-transition'), 50); 
}

codepen

看来，这已经回答了，downvoted，并删除了...我不知道为什么

来源

2017-02-03 21:27:28 vals

@Kevin Jimenez似乎你已经知道了我错过了什么？ – vals

增加超时似乎是一个肮脏的解决方案，不是吗？我的意思是，你如何设置持续时间？经验体验？但它取决于浏览器......这将是我的我试图找到一个触发事件，当一个位置到达，没有过渡，但它似乎不存在 – Joel

不，这不是一个肮脏的解决方案，它是更干净的解决方案。 out并不重要，在大多数浏览器中可以是0.这里的关键问题是允许在2个函数之间进行浏览器渲染。（initPortraitPanel并添加类） – vals

禁用和启用css转换到初始化位置

回答

相关问题