<http://schema.org/description>
"&amp;lt;div class=&amp;quot;separator&amp;quot; style=&amp;quot;clear: both; text-align: center;&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;blockquote class=&amp;quot;tr_bq&amp;quot;&amp;gt;tl;dr: Implementing features similar to Bootstrap is hard without basic animation support in Dart. Basic animation support is not as easy as you\u2019d think. I\u2019ve made a stab. Check out the demo.&amp;lt;/blockquote&amp;gt;I\u2019ve started a new Dart project - Dart Widgets. The inspiration is Bootstrap, but with a focus on features that map cleanly to Web Components.While digging into Bootstrap, I realized that there was a heavy dependency on jQuery\u2013specifically the show/hide/toggle functionality. This is critical for expanders, menus, modals, pretty much everything.&amp;lt;h2&amp;gt;Show, hide, toggle&amp;lt;/h2&amp;gt;It turns out implementing show/hide/toggle is not as easy as one might guess.One could naively toggle display: none; in an element\u2019s style attribute and call it a day, but a lot of edge cases would be missed.Throw in the ability to optionally animate the show/hide behavior and things get a lot more complicated.A short list of the cases to ponder:&amp;lt;ul&amp;gt;&amp;lt;li&amp;gt;Element with a non-standard display value. (e.g. a div inherited a display of inline-block)&amp;lt;/li&amp;gt;&amp;lt;li&amp;gt;Element with a local display of none\u00A0&amp;lt;/li&amp;gt;&amp;lt;li&amp;gt;Element inherited a display of none&amp;lt;/li&amp;gt;&amp;lt;li&amp;gt;Show is called while an element is hiding and vice versa&amp;lt;/li&amp;gt;&amp;lt;li&amp;gt;Toggle is called 10 times before the first animation finishes&amp;lt;/li&amp;gt;&amp;lt;li&amp;gt;Show is called on an element with effect A while effect B is hiding it.&amp;lt;/li&amp;gt;&amp;lt;/ul&amp;gt;Huge props to the jQuery and jQuery-ui folks for tackling this problem. Their code served a great starting spot. I feel bad that they had to implement this logic in Javascript.&amp;lt;h2&amp;gt;Test&amp;lt;/h2&amp;gt;I can\u2019t tell you how valuable test-driven development was in getting this project off the ground. It would have been next to impossible to ensure all of the edge cases were handled cleanly.I need to write another post about how my approach to testing in Dart has evolved. Let\u2019s just say I didn\u2019t code up 939 tests by hand.&amp;lt;div class=&amp;quot;separator&amp;quot; style=&amp;quot;clear: both; text-align: center;&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;After a lot of head scratching, I think I ended up with pretty clean, extensible model.As proof, I offer the code for doing a open/close door effect:&amp;lt;pre&amp;gt;class DoorEffect extends Css3TransitionEffect {  DoorEffect() : super(    \u2018-webkit-transform\u2019,    \u2018perspective(1000px) rotateY(90deg)\u2019,    \u2018perspective(1000px) rotateY(0deg)\u2019,    {\u2018-webkit-transform-origin\u2019: \u20180% 50%\u2019}  );}&amp;lt;/pre&amp;gt;There are still a few things I\u2019d like to get working\u2013get tests working in Firefox, find a way to handle browser prefixes cleanly\u2013but generally I\u2019m happy with progress.Check out the demo.Check out the code.Let me know what you think."^^<http://www.w3.org/2001/XMLSchema#string>
<http://work.j832.com/2013/01/tldr-implementing-features-similar-to.html>