Animating Custom Properties

## my-list.html
<html><head><script src="my-list.js" defer=""></script><link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">

</head><body><dom-module id="my-list">
  <template>
    <style>
      :host {
        display: block;
      }

## customprops.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
              robdodson
            / customprops.md
          
          
            Last active Feb 4, 2016
          
          
            Animating Custom Properties
          
        
      View customprops.md
  
    
    Animating Custom Properties

Here's what the spec says:


Notably, they can even be transitioned or animated, but since the UA has no way to interpret their contents, they always use the "flips at 50%" behavior that is used for any other pair of values that can’t be intelligently interpolated. However, any custom property used in a @keyframes rule becomes animation-tainted, which affects how it is treated when referred to via the var()function in an animation property.


(this is theory, not Chrome practice quite yet)


you can refer to custom properties in transition or animation endpoints, they'll "just work" (example)


## gulpfile.js
var gutil = require('gulp-util');

...


// Lint JavaScript
gulp.task('lint', function() {
  var requiredFiles = ['.jscsrc', '.jshintrc', 'weasel.ball'];
  requiredFiles.forEach(function(file) {
    try {

## wct.conf.json
{
  "plugins": {
    "local": {
      "browsers": ["chrome", "firefox"]
    },
    "sauce": {
      "browsers": ["chrome", "firefox"]
    }
  }
}

## iron-ajax.html
<!doctype html>
<!--
@license
Copyright (c) 2015 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
-->

## side-drawer-.html
// in side-drawer.html's prototype

attached: function() {
  // if (someProperty) { ...
  this.$.drawerContainer.classList.add('drawer-container-left');
  // } else { ...
  // this.$.drawerContainer.classList.add('drawer-container-right');
},

## app.js
app.clearCompletedTodos = function() {
  this.todos.forEach(function(todo) {
    if (todo.isComplete) {
      this.ref.child(todo.uid).remove();
    }
  }.bind(this));
};

## test.js
before(function (done) {
  helpers.run(path.join(__dirname, '../app'))
    .inDir(path.join(__dirname, './tmp'))
    .withArguments(['--skip-install'])
    .withPrompt({
      includeWCT: true
    })
    .on('end', function() {
      helpers.run(path.join(__dirname, '../el'))
        .inDir(path.join(__dirname, './tmp'))

## index.html

<!-- Let's say x-foo is a fancy component that contains an iron-list in its shadow dom
     We dont' want the user to have to setup the iron-list themselves, instead they can
     just give us a template, and we'll distribute it -->
<x-foo>
  <template>
    ...
  </template>
</x-foo>

## gist-server.json
{
  "polymer": "https://raw.githubusercontent.com/Polymer/polymer/v1.0.7/",
  "webcomponentsjs": "https://raw.githubusercontent.com/webcomponents/webcomponentsjs/v0.7.7/"
}