Is it possible to disable only transform?

[ianthedev]

I would like to disable the transition of transform and keep the transition of opacity.

Because the transitionDuration: 0 option disables all transitions, I had to resort to setting transition-property: opacity !important; for items in my CSS file.

But that results in an issue: Items which are re-layed out aren't have their transition and transform-related inline styles removed. For example, inline styles such as transition-property: opacity, transform; transition-duration: 0.4s; transition-delay: 0ms; transform: translate3d(1460px, -189px, 0px); still exist after the re-layout. Normally, those inline styles would be removed after the re-layout.

Is there a proper way to disable only transform?

[rj919]

I am having a similar problem which results in a double animation when the layout is reloaded. It transitions once, then does so again from the opposite direction. Unfortunately, I cannot recreate the phenomena I am experiencing in codepen since I also have images loading in my animation. But I have posted the general workflow here: https://codepen.io/r555/pen/yLezRvz

It involves initializing an empty container with masonry, then using $grid.append($item).masonry('appended', $item) to add items to the container and assigning triggers to those items which resize them. It calls $grid.masonry('layout') once the item has been resized... causing a double animation in my code (but not in codepen).

I notice that this phenomena leaves the transition styles on the element similar to the OP. On the other hand, I do not notice this problem when I change my code to start masonry after all items are already in the container, or if I turn transitionDuration off. Very strange.