[Checkbox] Make Checkbox Button Animated

[paperdave]

This pull request gives the Radio buttons an animation, which follows the material design spec.

Motivations: #12639 and #15671

The animation is almost complete, but there are a few problems and questions.

• Is using CSS clip-path for the box and checkbox okay for performance and compatibility?
• For styling the checkbox check SVG, I'm currently doing this

      // This is not a good idea, but I'm not sure what else I can do.
      fill: 'white',

  I know can be fixed, but I don't know how to get the background color for the SVG fill.
• I havent added tests yet; the test runner is failing on a lot of the codebase without changes for me and I'm not sure why.

I hope we can fix these issues and get this added.

and also, here's what it looks like.

• I have followed (at least) the PR section of the contributing guide.

[paperdave]

Yes, i cannot use clip-path since it doesnt work on my iphone, and i also heard it's not supported on IE or edge.

EDIT: The svg says it works on all browsers, so i'd have to rewrite these animatons to use the svg version instead.

[oliviertassinari]

@imdaveead I'm curious, why did you close the pull request?

[paperdave]

it's going to be very hard to get it implemented to be like the spec and support browsers and not messy code.

right now my branch has a very messy implementation (but it works, not sure on ie though), and i dont feel like fixing it up much.

if you or anyone else wants to go for it, reopen this or use what i already got

since what i got wasn't total garbage, i decided to keep it in a "collection of random plugins" repo as a npm package, since it fits my needs and i would like to use it in my own projects, where supporting everything is not very important.

[paperdave]

i was looking at how some other implementations did the animation, and discovered stroke-dashoffset, which makes everything much easier to do. if someone were to work on this feature, it might be better to start all new instead of off this branch.

[mbrookes]

That was how I animated the SVG version of the outlined textfield component before the clever use of fieldset & legend was proposed. It works quite nicely. I can see that being very efficient here given a checkmark based on a simple path.

[oliviertassinari]

Did you check how quasar solves the problem?

[paperdave]

@oliviertassinari yes, i was inspecting the svg they used, and noticed some stroke related styles, which i didn't knew were available. i want to see if theres a easier way to animate the outline to filled square, which no one seems to have implemented. if not i'll probably just ignore it and fade in the box.

either way i'm going to restart my work on this, and try to get a better version of it.

[oliviertassinari]

@imdaveead That sounds great!

[oliviertassinari]

Alternatively, we could, for now, fallback on the v0.x animation strategy. It works with custom icons too.