Fix CSS transitions on sidebar

[signalcat]

This PR fixes the problem where opening or closing the side bar does not respect the CSS transform property (closes #19777).

This bug was caused by #17988, which changed the toggle function to use the display property instead of the visibility property. Toggling display appears to interrupt the CSS transition property, whereas toggling visibility does not. The other solution proposed in the thread works but is dependent on the value of ANIMATION_TIMEOUT being greater than the time specified for the CSS transition property. This could potentially break if we try to overwrite the CSS transition property with a transition time greater than ANIMATION_TIMEOUT. Reverting the sidebar mask toggle back to using the visibility property is slightly more robust. There is one minor caveat though: since the sidebar is hidden after a constant delay (ANIMATION_TIMEOUT = 350), this means that the closing animation has to finish before that delay. But with the visibility toggle, at least this is not a problem for the opening animation.

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). 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 (or fixed any issues), please reply here (e.g. I signed it!) and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

[signalcat]

I signed it!

[googlebot]

CLAs look good, thanks!

[sparhami]

We already have a class that does the visibility hidden (though inverted from this) called i-amphtml-ghost. If you remove it here, and add it for closeMask, you can avoid adding any CSS in this PR.

Another difference is that the validator prevents page authors from targeting classes starting with i-amp. I don't think there is any reason for page authors to target this, so I think it would be better to restrict them from using it in the first place.

[cathyxz]

Ping @signalcat. We'd love to get this PR merged if possible. It looks like a simple change to use i-amphtml-ghost instead of amp-hidden and reverting those extra CSS definitions will suffice. Do you know when you might be able to make this change? If you don't have time to work on it, I'd be happy to see this through.

[cathyxz]

Sync-ed offline and it looks like @signalcat won't be able to get to this right now. Made the changes you requested, @sparhami PTAL?