Revealwidget and CSS Animation

#1

In https://tiddlywiki.com/#RevealWidget, doc says it can accept parameter animate and retain to have an opening/closing animation!

I am looking for examples to see how $reveal can be used with some animation!

#2

You can do search Shadows reveal animate retain and you will see where this parameters are used (except the widget tiddler reveal.js).

In $:/core/ui/ViewTemplate/body you can see it, the animation is activated by fold/unfold but I don’t know how animation works, surely the mechanism will be in the widget tiddler.

#3

Thanks Alvaro!
Yes, I was looking for some custom classes here!
One obstacle here is the refreshing tiddler by change in different widgets which makes things difficult!

#4

I wonder if this is a case of sometimes using pure html/CSS to animate some content rather than widgets (if possible) so there is no tiddler refresh process. The question is can we still trigger the animation. We may perhaps with the <details> widget because it comes with its own button trigger, but I am not sure how many opportunities exist like this without needing a button widget, to trigger something.

#5

Time ago I also looked for that, but the reveal widget does animation and then is adds/removes html attribute hidden. And it also adds a html element with the class tc-reveal that doen’t have use in CSS. All of this is the reason of my “hate” to this widget. Maybe it could be more easier to understand if the widget toogle/switch class/es.

I don’t understand the second part.(refreshing)

@TW_Tones , you can do animations with pseudoclass :hover or with tricky use of a checkbox and play with the pseudoclass :checked to animate. But I think that is better use a button to trigger changes in class attribute and you have animation in the CSS.

2 Likes
#6

Just a couple of clarifications:

  • If you just want to trigger an animation, it would probably be easier to use a custom class on a DIV than the reveal widget
  • The reveal widget by default does not render hidden content so as to improve performance: that’s why it doesn’t just use CSS to show and hide its content
  • The tc-reveal class is intended to aid debugging, making it clearer which elements were generated by the reveal widget
2 Likes
#7

This is a teaching/learning moment, so those learning TiddlyWiki internals may want to pay close attention to what @jeremyruston is suggesting here.

If you add classes (or other attributes) to your own widgets and HTML elements, you can inspect the derived rendering in the developer tools inspection pane. Along with the $log widget, you can gain insights into your code and see where tricky layout problems can be improved/fixed.

For long, heavy, densely populated tiddlers (containing many transclusions, for example), I even add custom elements with attributes denoting why a particular layout path was chosen:

image
image797Ă—876 57.4 KB

Sorry for the slight side-step on the topic, but I thought it worth it.

1 Like
#8

@jeremyruston , thanks for the clarifications.

If we return to the topic, IMO, the animation (animate+retain) is confusing when someone tries understand which and how animation ocurrs, and the class doesn’t help because we can expect some CSS. But as you say it is for debug (This reason was something that I didn’t know).

1 Like