[BUG] The $vars widget kills the transitions effects

[kookma]

Describe the bug
I am implementing a progress bar using pure wikitext and CSS. When I use $vars widget, CSS transition does not work. See below example.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://tiddlywiki.com/
2. Create a new tiddler with below contents
3. Click Expand and Reset and see the transition effects

<$button>Extend
<$action-setfield $tiddler="test/styleTid" text="transform: scaleX(0.5)"/>
</$button>
<$button>Reset
<$action-setfield $tiddler="test/styleTid" text=""/>
</$button>

<div class="main">
<div class="grow" style={{test/styleTid}}>

</div>
</div>


<style>
.main{
width:100%;
height:40px;
background-color:#e5e5e5;
}
.main .grow { 
transform-origin:0 0;
transition: transform .8s ease-in-out;

height:40px;
background-color:orange;

width:50%;
transform:scaleX(0);
}

</style>

It works fine and animation/transition nicely works.

4. Now Use $vars for setting style, eg change

<div class="main">
<div class="grow" style={{test/styleTid}}>

</div>
</div>

with

<$vars xstyle={{{ [[test/styleTid]get[text]] }}} >

<div class="main">
<div class="grow" style=<<xstyle>>  >

</div>
</div>
</$vars>

5. again click on Expand and Reset
6. No animation/transition effects

Expected behavior
To see the transition effects

Desktop (please complete the following information):

• OS: [e.g. iOS] Windows 10
• Browser Chrome 87
• Version TW 5.1.23

[kookma]

This is the same for $set, $wikify, and macro (all produces variables). May be there is something I miss!

[saqimtiaz]

@kookma use this instead:

<div class="main">
<div class="grow" style={{{ [[test/styleTid]get[text]] }}}  >

</div>
</div>

I'll add an explanation a little later today as to why this happens. I think we discussed something similar once before.

[saqimtiaz]

@kookma so all widgets that set variable values, like set, vars, wikify have to remove and re-render their entire content each time their variable changes value. This is by design, as it is needed for the widgets and wikitext inside these widgets to know the new value of the variables.

So in your example the entire div is replaced when the vars widget changes the value of the variable, therefore no animation happens.

Now what most users do not realize is that all HTML in TiddlyWiki is actually also rendered by widgets. All HTML users type is parsed into hidden/private element widgets which then render HTML elements. This is why you can use syntax like class={{!!class}} and style={{{ myfilter }}} for HTML tags, just like you can for widgets.

When the attribute for a HTML element (that is an element widget) changes, the attribute is updated and there is no need to destroy and re-create its content. This is why you can specify your filter directly as a style attribute for the div, and still get CSS animation.

This is written in a bit of a rush, but I hope it gets the point across.

[kookma]

@saqimtiaz - Thank you!
My real code is a little more complicated, but from our previous discussion and present solution I understand I need the change very close to the element itself.

[saqimtiaz]

@kookma if the problem is resolved please close the issue :)

[kookma]

@saqimtiaz - I close the issue here! but I think it worth discussion to see what is the real problem.