Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(4143)

Unified Diff: bower_components/core-transition/core-transition-css.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
Index: bower_components/core-transition/core-transition-css.html
diff --git a/bower_components/core-transition/core-transition-css.html b/bower_components/core-transition/core-transition-css.html
deleted file mode 100644
index fd8d2fcfe1c9efed8b68e7db00e54bff41788913..0000000000000000000000000000000000000000
--- a/bower_components/core-transition/core-transition-css.html
+++ /dev/null
@@ -1,221 +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
--->
-
-<link rel="import" href="core-transition.html">
-
-<polymer-element name="core-transition-css" extends="core-transition" attributes="transitionType">
-<template>
- <link no-shim rel="stylesheet" href="core-transition-overlay.css">
-</template>
-<script>
-
- Polymer('core-transition-css', {
-
- /**
- * The class that will be applied to all animated nodes.
- *
- * @attribute baseClass
- * @type string
- * @default "core-transition"
- */
- baseClass: 'core-transition',
-
- /**
- * The class that will be applied to nodes in the opened state.
- *
- * @attribute openedClass
- * @type string
- * @default "core-opened"
- */
- openedClass: 'core-opened',
-
- /**
- * The class that will be applied to nodes in the closed state.
- *
- * @attribute closedClass
- * @type string
- * @default "core-closed"
- */
- closedClass: 'core-closed',
-
- /**
- * Event to listen to for animation completion.
- *
- * @attribute completeEventName
- * @type string
- * @default "transitionEnd"
- */
- completeEventName: 'transitionend',
-
- publish: {
- /**
- * A secondary configuration attribute for the animation. The class
- * `<baseClass>-<transitionType` is applied to the animated node during
- * `setup`.
- *
- * @attribute transitionType
- * @type string
- */
- transitionType: null
- },
-
- registerCallback: function(element) {
- this.transitionStyle = element.templateContent().firstElementChild;
- },
-
- // template is just for loading styles, we don't need a shadowRoot
- fetchTemplate: function() {
- return null;
- },
-
- go: function(node, state) {
- if (state.opened !== undefined) {
- this.transitionOpened(node, state.opened);
- }
- },
-
- setup: function(node) {
- if (!node._hasTransitionStyle) {
- if (!node.shadowRoot) {
- node.createShadowRoot().innerHTML = '<content></content>';
- }
- this.installScopeStyle(this.transitionStyle, 'transition',
- node.shadowRoot);
- node._hasTransitionStyle = true;
- }
- node.classList.add(this.baseClass);
- if (this.transitionType) {
- node.classList.add(this.baseClass + '-' + this.transitionType);
- }
- },
-
- teardown: function(node) {
- node.classList.remove(this.baseClass);
- if (this.transitionType) {
- node.classList.remove(this.baseClass + '-' + this.transitionType);
- }
- },
-
- transitionOpened: function(node, opened) {
- this.listenOnce(node, this.completeEventName, function() {
- node.classList.toggle(this.revealedClass, opened);
- if (!opened) {
- node.classList.remove(this.closedClass);
- }
- this.complete(node);
- });
- node.classList.toggle(this.openedClass, opened);
- node.classList.toggle(this.closedClass, !opened);
- }
-
- });
-</script>
-</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>
« no previous file with comments | « bower_components/core-transition/core-transition.html ('k') | bower_components/core-transition/core-transition-overlay.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698