| OLD | NEW |
|---|
| (Empty) |
| 1 <!-- Copyright 2013 Google Inc. All Rights Reserved. | |
| 2 | |
| 3 Licensed under the Apache License, Version 2.0 (the "License"); you may not use | |
| 4 this file except in compliance with the License. You may obtain a copy of the | |
| 5 License at | |
| 6 | |
| 7 http://www.apache.org/licenses/LICENSE-2.0 | |
| 8 | |
| 9 Unless required by applicable law or agreed to in writing, software distributed | |
| 10 under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR | |
| 11 CONDITIONS OF ANY KIND, either express or implied. See the License for the | |
| 12 specific language governing permissions and limitations under the License. | |
| 13 | |
| 14 --> | |
| 15 | |
| 16 <!DOCTYPE html> | |
| 17 | |
| 18 <div class="content"> | |
| 19 | |
| 20 <div id="animNum">1</div> | |
| 21 | |
| 22 <div class="heading subTitle">Create a new basic animation</div> | |
| 23 | |
| 24 <div class="heading exercises">Exercise 1 - Moving Right</div> | |
| 25 | |
| 26 <p class="description">Now let's code some animation out! In the 'Try It | |
| 27 Yourself' block, you should see a default div block with class named 'test' | |
| 28 and ID named 'a' coloured in red. If you don't like the colour, you can | |
| 29 always change it around. Click on 'Update' when you have finished typing in | |
| 30 your code.</p> | |
| 31 <p class="description">Now we want to make the red rounded | |
| 32 rectangle move to 300px from left for 2 seconds. We should do the | |
| 33 following:</p> | |
| 34 | |
| 35 <code class="codeSamples">new Animation(document.querySelector("#a"), {left: | |
| 36 "300px"}, 2);</code> | |
| 37 | |
| 38 <div id="hideLabel" onclick="toggleSolution()">Show Solution</div> | |
| 39 <div id="toggleText" class="codeSamples"> | |
| 40 <code>new Animation(document.querySelector("#a"), {left: "300px"}, 2);</code
> | |
| 41 </div> | |
| 42 | |
| 43 <div id="tryIt"></div> | |
| 44 | |
| 45 <ol class="description"> | |
| 46 <li><code>'new Animation()'</code> creates a new animation object.</li> | |
| 47 <li> | |
| 48 <code>'document.querySelector("#a")'</code> is a DOM method which | |
| 49 gets the element with id equals to 'a' from the HTML file. You | |
| 50 can always use <code>'document.getElementById("a")'</code> which | |
| 51 would result the same thing. Since we have defined its class | |
| 52 name as well, we can also select it using | |
| 53 <code>'document.querySelector(".test")'.</code> | |
| 54 </li> | |
| 55 <li><code>'{left: "300px"}'</code> is the effects of the animation. | |
| 56 In this case we are letting it move to 300px from left.</li> | |
| 57 <li><code>'2'</code> will set the duration of the animation to | |
| 58 2 seconds. The bigger the number, the slower the animation | |
| 59 speed and vice versa.</li> | |
| 60 </ol> | |
| 61 | |
| 62 </div> <!-- content ending div --> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 786953007:
npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master