| Index: third_party/polymer/components-chromium/core-transition/core-transition-css.html
|
| diff --git a/third_party/polymer/components-chromium/core-transition/core-transition-css.html b/third_party/polymer/components-chromium/core-transition/core-transition-css.html
|
| deleted file mode 100644
|
| index 12ddd4687d8c6580f596bf6ad46eb73249470aa0..0000000000000000000000000000000000000000
|
| --- a/third_party/polymer/components-chromium/core-transition/core-transition-css.html
|
| +++ /dev/null
|
| @@ -1,116 +0,0 @@
|
| -<!--
|
| -Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
| -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
| -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
| -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
| -Code distributed by Google as part of the polymer project is also
|
| -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
| ---><!--
|
| -
|
| -`<core-transition-css>` implements CSS transitions as `<core-transition>` objects so they can be
|
| -reused in a pluggable transition system such as in `<core-overlay>`. Currently this class has
|
| -some specific support to animate an element from and to the viewport such as a dialog, but you
|
| -can override it for different effects.
|
| -
|
| -Example:
|
| -
|
| -my-css-transition.html:
|
| -
|
| - <polymer-element name="my-css-transition" extends="core-transition-css">
|
| - <template>
|
| - <style>
|
| - :host(.my-transition) {
|
| - opacity: 0;
|
| - transition: transform 1s ease-out, opacity 1s ease-out;
|
| - }
|
| - :host(.my-transition.my-opened) {
|
| - opacity: 1;
|
| - transform: none;
|
| - }
|
| - :host(.my-transition-top) {
|
| - transform: translateY(-100vh);
|
| - }
|
| - :host(.my-transition-bottom) {
|
| - transform: translateY(100vh);
|
| - }
|
| - </style>
|
| - </template>
|
| - <script>
|
| - Polymer({
|
| - baseClass: 'my-transition',
|
| - openedClass: 'my-opened'
|
| - });
|
| - </script>
|
| - </polymer-element>
|
| -
|
| - <my-css-transition id="my-transition-top" transitionType="top"></my-css-transition>
|
| - <my-css-transition id="my-transition-bottom" transitionType="bottom"></my-css-transition>
|
| -
|
| -my-css-transition-demo.html
|
| -
|
| - <link href="components/core-meta/core-meta.html" rel="import">
|
| - <link href="my-css-transition.html">
|
| -
|
| - <div id="animate-me"></div>
|
| -
|
| - <script>
|
| - // Get the core-transition
|
| - var meta = document.createElement('core-meta');
|
| - meta.type = 'transition';
|
| - var transition1 = meta.byId('my-transition-top');
|
| -
|
| - // Set up the animation
|
| - var animated = document.getElementById('animate-me');
|
| - transition1.setup(animated);
|
| - transition1.go(animated, {opened: true});
|
| - </script>
|
| -
|
| -The first element in the template of a `<core-transition-css>` object should be a stylesheet. It
|
| -will be injected to the scope of the animated node in the `setup` function. The node is initially
|
| -invisible with `opacity: 0`, and you can transition it to an "opened" state by passing
|
| -`{opened: true}` to the `go` function.
|
| -
|
| -All nodes being animated will get the class `my-transition` added in the `setup` function.
|
| -Additionally, the class `my-transition-<transitionType>` will be applied. You can use the
|
| -`transitionType` attribute to implement several different behaviors with the same
|
| -`<core-transition-css>` object. In the above example, `<my-css-transition>` implements both
|
| -sliding the node from the top of the viewport and from the bottom of the viewport.
|
| -
|
| -Available transitions
|
| ----------------------
|
| -
|
| -`<core-transition-css>` includes several commonly used transitions.
|
| -
|
| -`core-transition-fade`: Animates from `opacity: 0` to `opacity: 1` when it opens.
|
| -
|
| -`core-transition-center`: Zooms the node into the final size.
|
| -
|
| -`core-transition-top`: Slides the node into the final position from the top.
|
| -
|
| -`core-transition-bottom`: Slides the node into the final position from the bottom.
|
| -
|
| -`core-transition-left`: Slides the node into the final position from the left.
|
| -
|
| -`core-transition-right`: Slides the node into the final position from the right.
|
| -
|
| -@group Polymer Core Elements
|
| -@element core-transition-css
|
| -@extends core-transition
|
| -@status beta
|
| -@homepage github.io
|
| ---><html><head><link rel="import" href="core-transition.html">
|
| -
|
| -</head><body><polymer-element name="core-transition-css" extends="core-transition" attributes="transitionType" assetpath="">
|
| -<template>
|
| - <link no-shim="" rel="stylesheet" href="core-transition-overlay.css">
|
| -</template>
|
| -
|
| -</polymer-element>
|
| -
|
| -<core-transition-css id="core-transition-fade"></core-transition-css>
|
| -<core-transition-css id="core-transition-center" transitiontype="center"></core-transition-css>
|
| -<core-transition-css id="core-transition-top" transitiontype="top"></core-transition-css>
|
| -<core-transition-css id="core-transition-bottom" transitiontype="bottom"></core-transition-css>
|
| -<core-transition-css id="core-transition-left" transitiontype="left"></core-transition-css>
|
| -<core-transition-css id="core-transition-right" transitiontype="right"></core-transition-css>
|
| -<script charset="utf-8" src="core-transition-css-extracted.js"></script></body></html>
|
|
|