examples/components/set-image.js
function () {
        var data = this.data;
        var targetEl = this.data.target;

        // Only set up once.
        if (targetEl.dataset.setImageFadeSetup) { return; }
        targetEl.dataset.setImageFadeSetup = true;

        // Create animation.
        targetEl.setAttribute('animation__fade', {
            property: 'material.color',
            startEvents: 'set-image-fade',
            dir: 'alternate',
            dur: data.dur,
            from: '#FFF',
            to: '#000'
        });
    }
function () {
        var data = this.data;
        var targetEl = this.data.target;

        // Only set up once.
        if (targetEl.dataset.setImageFadeSetup) { return; }
        targetEl.dataset.setImageFadeSetup = true;

        // Create animation.
        targetEl.setAttribute('animation__fade', {
            property: 'material.color',
            startEvents: 'set-image-fade',
            dir: 'alternate',
            dur: data.dur,
            from: '#FFF',
            to: '#000'
        });
    }
function ( ) { var data = this . data ; var targetEl = this . data . target ; // Only set up once. if ( targetEl . dataset . setImageFadeSetup ) { return ; } targetEl . dataset . setImageFadeSetup = true ; // Create animation. targetEl . setAttribute ( 'animation__fade' , { property : 'material.color' , startEvents : 'set-image-fade' , dir : 'alternate' , dur : data . dur , from : '#FFF' , to : '#000' } ) ; }
Setup fade-in + fade-out.
Setup fade - in + fade - out .