solved issue with the 'show' transition never working

[ahmednuaman]

I kept having problems where the 'hide' fade animation worked fine but the 'show' fade animation didn't. I narrowed it down to .ng-hide not having opacity: 0. Sticking this in has fixed the 'show' fade animation for me.

[mary-poppins]

Thanks for the PR! Please check the items below to help us merge this faster. See the contributing docs for more information.

• Uses the issue template (#7607)

If you need to make changes to your pull request, you can update the commit with git commit --amend.
Then, update the pull request with git push -f.

Thanks again for your help!

[mary-poppins]

I'm sorry, but I wasn't able to verify your Contributor License Agreement (CLA) signature. CLA signature is required for any code contributions to AngularJS.

Please sign our CLA and ensure that the CLA signature email address and the email address in this PR's commits match.

If you signed the CLA as a corporation, please let us know the company's name.

Thanks a bunch!

PS: If you signed the CLA in the past then most likely the email addresses don't match. Please sign the CLA again or update the email address in the commit of this PR.
PS2: If you are a Googler, please sign the CLA as well to simplify the CLA verification process.

[ahmednuaman]

All done.

[mary-poppins]

CLA signature verified! Thank you!

Someone from the team will now triage your PR and it will be processed based on the determined priority (doc updates and fixes with tests are prioritized over other changes).

[btford]

@matsko is this still an issue?

[ahmednuaman]

Hello. Yep, it just makes the full animation process a lot nicer. Sorry for the broken build, sad 🐼

[matsko]

@ahmednuaman since the recent versions of 1.3 handle the display styling for you then this means that having CSS code that looks like:

.sample-show-hide.ng-hide {
    opacity:0;
}

Works fine. Can you possible change it to this? What do you think?

[ahmednuaman]

Yeah sure, by "display styling", do you mean just display: block etc?

[matsko]

Yup. That is not needed anymore. The CSS selector dance isn't required some ngAnimate is smart enough to apply the display change at the right time.

[ahmednuaman]

Ok makes sense, so do you want me to remove important? I'm not sure that will cause a problem?

[matsko]

Yeah that would be good. All the CSS code can be removed for the ng-hide animation except for that single rule that has the opacity: 0 style.

[ahmednuaman]

Is there somewhere I can test this?

[matsko]

In the angular.js repo, run grunt package webserver. Then point your browser to: http://localhost:8000/build/docs/guide/animations. It should be there as the first example.

[ahmednuaman]

Sure, I'm going to test it against my css code on one of my projects, should I just use master or 1.3.0-beta.11?

[matsko]

master.

[ahmednuaman]

Sorry for slacking on this, checking now.

[ahmednuaman]

All done, here's a gif of it in action:

[ahmednuaman]

Hmm, damn gif doesn't really give the full frames.

[matsko]

Please squash everything into one commit.

[ahmednuaman]

All done.

[matsko]

@btford please merge this in for me. I've only got mobile.

[matsko]

@ahmednuaman with the new fixes to ngShow/ngHide in 1.3, I updated your code and it removes more code than it adds (which is always a great thing).

d2963ad

Thank you for making the fix.

[ahmednuaman]

👍