NO BUG: Transition not work on custom free shipping progress bar

Bugs
1

Hi,

I created a fully custom free shipping progress bar, but there seems to be a problem: the transition isn’t actually being applied to the bar. However, it works well with the Progress Bar element.

{"content":[{"id":"tvzyix","name":"woocommerce-dynamic-fragment","parent":0,"children":["uohymo"],"settings":{"generatePredefinedElements":"free-shipping-progress","_position":"fixed","_bottom":"20","_left":"20","_background":{"color":{"raw":"#ffffff"}},"_padding":{"top":"15","right":"15","bottom":"15","left":"15"},"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"#e5e5e5"}}}},{"id":"uohymo","name":"block","parent":"tvzyix","children":["nnszga"],"settings":{"_heightMin":"10","_background":{"color":{"raw":"#f7f7f7"}},"_width":"300"},"label":"Bar wrapper"},{"id":"nnszga","name":"block","parent":"uohymo","children":[],"settings":{"_heightMin":"10","_background":{"color":{"raw":"#ffbf00"}},"_width":"0","_attributes":[{"id":"ptzxtn","name":"style","value":"width: {woo_free_shipping_progress:value}%;"},{"id":"sluoyr","name":"data-width","value":"{woo_free_shipping_progress:value}%"},{"id":"srmuqp","name":"data-bricks-progress-bar-width","value":"{woo_free_shipping_progress:value}%"}],"_cssTransition":"all .6s cubic-bezier(.55, .055, .675, .19);"},"label":"Bar"}],"source":"bricksCopiedElements","sourceUrl":"https://try.bricksbuilder.io/t4ccb117","version":"2.4.1"}
3

Hi @Victor1999

This is expected behavior rather than a bug. When the cart changes, the Dynamic Fragment replaces its DOM with newly rendered HTML. Your custom bar therefore appears at its new width as a new element; a CSS transition cannot animate between the old and new widths across that replacement.

Bricks handles this specifically for its Progress Bar element: its JavaScript remembers the previous width and applies it to the replacement element before allowing the width to change. A custom-built bar needs its own JavaScript to preserve and restore that width during fragment updates. Adding the Progress Bar data attributes to a Block element does not make it use the built-in handling.

4

I wonder if the view transition can animate this