You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>Your <code>ListPage</code> class now has a <code>groceryList</code> property that you fill with three objects in an <code>ngOnInit</code> handler, and a <code>@ViewChild</code> reference to the <code><ListView></code> element that you’ll use later. If you run your app and login, you should see the same list of groceries on the screen:</p>
1231
+
<p>Your <code>ListPage</code> class now has a <code>groceryList</code> property that you fill with three objects in an <code>ngOnInit</code> handler. If you run your app and login, you should see the same list of groceries on the screen:</p>
1234
1232
<p><imgsrc="images/chapter4/android/3.png" alt="List view on Android">
1235
1233
<imgsrc="images/chapter4/ios/3.png" alt="List view on iOS"></p>
1236
1234
<p>How does this work? Let’s return to this chunk of code:</p>
<p>This binds the ActivityIndicator’s <code>busy</code> attribute to an <code>isLoading</code> property in the <code>ListPage</code> component. To define that property, open <code>app/pages/list/list.component.ts</code> and add the following line of code immediately under <code>grocery: string = ""</code>:</p>
<p>To finish off this chapter, let’s look at how you can use the animation module to add a final bit of polish to how the list page loads.</p>
1543
+
<p>To finish off this chapter, let’s look at how you can use another NativeScript CSS feature to add a final bit of polish to how the list page loads.</p>
1544
+
<p>In the following exercise you’ll use an animation to fade in the page’s <code><ListView></code> after your data loads. However this time, instead of getting a reference to the <code><ListView></code> UI element and calling its <code>animate()</code> method, you’ll instead use NativeScript’s CSS animations.</p>
1547
1545
<h4class="exercise-start">
1548
-
<b>Exercise</b>: Add a fade-in animation
1546
+
<b>Exercise</b>: Using CSS animations
1549
1547
</h4>
1550
1548
1551
-
<p>In this exercise, you’ll use the animation module to animate the <code>opacity</code> of the list page’s <code><ListView></code> to add a fade-in effect. Start by opening <code>app/pages/list/list-common.css</code> and pasting in the following CSS at the top of the file:</p>
1549
+
<p> Start by opening <code>app/pages/list/list-common.css</code> and pasting in the following CSS at the top of the file:</p>
1552
1550
<pre><codeclass="lang-CSS">ListView {
1553
1551
opacity: 0;
1554
1552
}
1553
+
.visible {
1554
+
animation-name: show;
1555
+
animation-duration: 1s;
1556
+
}
1557
+
@keyframes show {
1558
+
from { opacity: 0; }
1559
+
to { opacity: 1; }
1560
+
}
1555
1561
</code></pre>
1556
-
<p>Next, open <code>app/pages/list/list-component.ts</code> and add replace the existing <code>ngOnInit()</code> function with the following code:</p>
1562
+
<p>This code sets the starting opacity value of the <code><ListView></code> to <code>0</code> so that the control is hidden when the page loads. The code also defines a <code>visible</code> class name that changes the <code>opacity</code> of an element from <code>0</code> to <code>1</code> over one full second.</p>
1563
+
<blockquote>
1564
+
<p><strong>TIP</strong>: For background on how the CSS animations syntax works, feel free to refer to the <ahref="https://github.com/NativeScript/docs/blob/master/ui/animation-css.md">NativeScript CSS animation documentation</a>, or <ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">external CSS animation guides</a>.</p>
1565
+
</blockquote>
1566
+
<p>Now that you have the CSS in place, your next step is to add the previously defined <code>"visible"</code> class name to the <code><ListView></code> control after data has loaded. To do that, start by opening <code>app/pages/list/list-component.ts</code> and adding the following new property right below the existing <code>isLoading = false;</code> line:</p>
<p>Next, in the same file, replace the existing <code>ngOnInit()</code> function with the following code, which sets the new <code>listLoaded</code> flag:</p>
<p>A few things are happening in the code above.</p>
1576
-
<p>First, in CSS, you assign an <code>opacity</code> of <code>0</code> to the list page’s <code><ListView></code>. This hides the grocery list completely when the page loads. Next, in TypeScript, after the <code>GroceryListService</code>’s <code>load()</code> call completes, you call the list view’s <code>animate()</code> function. This changes the element's <code>opacity</code> from <code>0</code> (completely hidden) to <code>1</code> (completely visible) over one full second.</p>
1577
-
<p>The result of this code is a nice fade-in animation:</p>
1587
+
<p>The key here is the list view’s <code>[class.visible]="listLoaded"</code> binding, which automatically applies the <code>visible</code> CSS class name based on the state of the <code>listLoaded</code> TypeScript property.</p>
1588
+
<p>The advantage of using CSS animations is that you avoid the need to reference specific UI elements in your TypeScript code; there was no need to create a local template variable. The CSS animation approach also help to keep your code decoupled. Your TypeScript code can focus on logic, and leave styling concerns to your CSS code.</p>
1589
+
<p>If you try out your app you should now see a nice fade-in animation:</p>
1578
1590
<p><imgsrc="images/chapter4/android/8.gif" alt="Loading animation on Android">
1579
1591
<imgsrc="images/chapter4/ios/8.gif" alt="Loading animation on iOS"></p>
1580
1592
<p>Now that you have functional login and list pages, let’s enhance the app’s functionality as a grocery list management tool. In the next chapters you'll add functionality such as email validation, social sharing, and more. And you’ll use one of NativeScript's most useful features to do so: npm modules.</p>
First, inCSS, youassignan`opacity`of`0`tothelistpage’s`<ListView>`. Thishidesthegrocerylistcompletelywhenthepage loads. Next, inTypeScript, afterthe`GroceryListService`’s`load()`callcompletes, youcallthelistview’s`animate()` function. Thischangestheelement's `opacity` from `0` (completely hidden) to `1` (completely visible) over one full second.
0 commit comments