Add a css-transitions player

[ju1ius]

Hi,
I've been using your flip technique since the blog post, and I was a bit surprised that you didn't include a css-only solution in this library... So here it is !

I also had to move the easing configuration responsibility to the different players, since css does not support functions, obviously.

Cheers.

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.

---

• If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
• If you signed the CLA as a corporation, please let us know the company's name.

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.

---

• If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
• If you signed the CLA as a corporation, please let us know the company's name.

[ju1ius]

Ok @googlebot, I signed it...

[googlebot]

CLAs look good, thanks!

[googlebot]

CLAs look good, thanks!

[ju1ius]

You're welcome @googlebot !

[paullewis]

Thanks very much! It's a great addition.

I do have some nits, so I'll step through and add them if you're willing to tweak as needed? TBH some of them are to map to the .eslintrc rules. I should add the tests in as per #1 so they get caught automatically.

[ju1ius]

I do have some nits, so I'll step through and add them if you're willing to tweak as needed?

No prob, go ahead !

TBH some of them are to map to the .eslintrc rules

Did my best to try to match the cs, but should be easier with an eslintrc

[ju1ius]

This is the one I used, btw:

{
    "root": true,
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "rules": {
        "indent": [2, 2],
        "curly": [1, "multi-or-nest", "consistent"],
        "quotes": [2, "single", "avoid-escape"],
        "linebreak-style": [2, "unix"],
        "semi": [2, "always"],
        "no-multi-spaces": 2,
        "space-before-function-paren": [2, "always"]
    }
}

[paullewis]

I added the one I've been using to the repo, so we can standardize around that. I think we should add two of your rules: "semi": [2, "always"] and "quotes": [2, "single", "avoid-escape"] (I don't think I have avoid-escape set).

Do you fancy PR'ing that in, then checking this PR to see that it matches? Given #4 I guess some of the changes in this PR might be temporary, but as with that Issue I didn't want you to think I'd forgotten you ;)

[googlebot]

We found a Contributor License Agreement for you (the sender of this pull request) and all commit authors, but as best as we can tell these commits were authored by someone else. If that's the case, please add them to this pull request and have them confirm that they're okay with these commits being contributed to Google. If we're mistaken and you did author these commits, just reply here to confirm.

[googlebot]

We found a Contributor License Agreement for you (the sender of this pull request) and all commit authors, but as best as we can tell these commits were authored by someone else. If that's the case, please add them to this pull request and have them confirm that they're okay with these commits being contributed to Google. If we're mistaken and you did author these commits, just reply here to confirm.

[ju1ius]

@googlebot w4t?

[ju1ius]

@googlebot confirm!

[ju1ius]

@googlebot sudo confirm ?

[ju1ius]

@googlebot damnit!

Something got weird with my rebase...

[googlebot]

CLAs look good, thanks!

[googlebot]

CLAs look good, thanks!

[ju1ius]

@paullewis Ok, squashed everything together ...

[wprater]

updates on this one?

[hem-brahmbhatt]

@ju1ius I just tried to use the dist/flip.js file to test the performance benefit of the CSS player, but neither the default or CSS player seems to work.

Nothing seems to be standing out as the culprit in your changes, so I'm assuming that the dist file may not have built properly.

If anyone's interested, here's a comparison I made of a dropdown animation using a height transition in CSS versus FLIP:

The second animation (FLIP) seems to still have some frames dropping. Here's the culprit trace:

I was hoping to test the CSS player and see if it was more performant :(