bower_components/web-animations-js/tutorial/basic-animations/basic-animation-exercise-1.html - Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

Unified Diff: bower_components/web-animations-js/tutorial/basic-animations/basic-animation-exercise-1.html

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

Patch Set: Created 5 years, 11 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « bower_components/web-animations-js/tutorial/basic-animations/basic-animation.html ('k') | bower_components/web-animations-js/tutorial/iframe-contents.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: bower_components/web-animations-js/tutorial/basic-animations/basic-animation-exercise-1.html

diff --git a/bower_components/web-animations-js/tutorial/basic-animations/basic-animation-exercise-1.html b/bower_components/web-animations-js/tutorial/basic-animations/basic-animation-exercise-1.html

deleted file mode 100644

index 711b748f74dda7541e66677ec8f015777c7fb534..0000000000000000000000000000000000000000

--- a/bower_components/web-animations-js/tutorial/basic-animations/basic-animation-exercise-1.html

+++ /dev/null

@@ -1,62 +0,0 @@

-Licensed under the Apache License, Version 2.0 (the "License"); you may not use

-this file except in compliance with the License. You may obtain a copy of the

-License at

- http://www.apache.org/licenses/LICENSE-2.0

-Unless required by applicable law or agreed to in writing, software distributed

-under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR

-CONDITIONS OF ANY KIND, either express or implied. See the License for the

-specific language governing permissions and limitations under the License.

--->

-<!DOCTYPE html>

-<div class="content">

- <div id="animNum">1</div>

- <div class="heading subTitle">Create a new basic animation</div>

- <div class="heading exercises">Exercise 1 - Moving Right</div>

- <p class="description">Now let's code some animation out! In the 'Try It

- Yourself' block, you should see a default div block with class named 'test'

- and ID named 'a' coloured in red. If you don't like the colour, you can

- always change it around. Click on 'Update' when you have finished typing in

- your code.</p>

- <p class="description">Now we want to make the red rounded

- rectangle move to 300px from left for 2 seconds. We should do the

- following:</p>

- <code class="codeSamples">new Animation(document.querySelector("#a"), {left:

- "300px"}, 2);</code>

- <div id="hideLabel" onclick="toggleSolution()">Show Solution</div>

- <div id="toggleText" class="codeSamples">

- <code>new Animation(document.querySelector("#a"), {left: "300px"}, 2);</code>

- </div>

- <div id="tryIt"></div>

- <ol class="description">

- <li><code>'new Animation()'</code> creates a new animation object.</li>

- <li>

- <code>'document.querySelector("#a")'</code> is a DOM method which

- gets the element with id equals to 'a' from the HTML file. You

- can always use <code>'document.getElementById("a")'</code> which

- would result the same thing. Since we have defined its class

- name as well, we can also select it using

- <code>'document.querySelector(".test")'.</code>

- </li>

- <li><code>'{left: "300px"}'</code> is the effects of the animation.

- In this case we are letting it move to 300px from left.</li>

- <li><code>'2'</code> will set the duration of the animation to

- 2 seconds. The bigger the number, the slower the animation

- speed and vice versa.</li>

- </ol>

-</div>