From tutorial, my grocery list disappears


At the end of Chapter 4 we make the list fade-in ( My list is disappearing right after it becomes fully visible. My guess is that the css is resetting the opacity back to 0, but I’m not sure how to debug that. Any ideas?


The tutorial says to use this css

.visible {
  animation-name: show;
  animation-duration: 1s;

but you need

.visible {
  animation-name: show;
  animation-duration: 1s;
  animation-fill-mode: forwards;


You’re right, that animation-fill-mode: forwards is something that’s according to CSS spec but was not “correctly implemented” before NativeScript 3. You’re now required to add that line if you want the to-state to “stick”.


Thanks for reporting the problem!

This one is my bad. I totally forgot to make this change when I updated the tutorials to NativeScript 3.0.

I just pushed a commit to fix this: It’ll be live once our Jekyll build process does its thing.

Thanks again :smile:


Thanks! While I have you, at, after completing the section “Exercise: Change hint colors on iOS” there is a crash if you are only using android.

I’m sure the crash is obvious to NS users and probably many first timers too, but I was confused by it and spent time rechecking my code. Maybe most people don’t even run it in android at this point, but since I want to be sure NS code is “acceptable” on either OS, I went ahead and tried it. Up to this point, the tutorial works even if you only use android and I assume it also works if you only use ios.

The code in the next sections explains how to deal with this, but I think the if (args.view.ios) guard should be moved up to this section.


Well this is what I get for primarily testing on iOS :stuck_out_tongue:

Thanks again. I’m planning on addressing some of these things that have come up in the tutorial next Monday, and I have this one on my list now.