Giter Club home page Giter Club logo

animator-velocity's Introduction

Aurelia

License: MIT npm version CircleCI TypeScript Twitter

Backers on Open Collective Sponsors on Open Collective Discord Chat

Aurelia 2

This is the Aurelia 2 monorepo, containing core and plugin packages, examples, benchmarks, and documentation for the upcoming major version of everybody's favorite modern JavaScript framework, Aurelia.

Introduction

Aurelia is a modern, front-end JavaScript framework for building browser, mobile, and desktop applications. It focuses on aligning closely with web platform specifications, using convention over configuration, and having minimal framework intrusion. Basically, we want you to just write your code without the framework getting in your way. ๐Ÿ˜‰

Aurelia applications are built by composing a series of simple components. By convention, components are made up of a vanilla JavaScript or Typescript class, with a corresponding HTML template.

//app.js
export class App {
  welcome = "Welcome to Aurelia";

  quests = [
    "To seek the holy grail",
    "To take the ring to Mordor",
    "To rescue princess Leia"
  ];
}
<!-- app.html -->
<form>
  <label>
    <span>What is your name?</span>
    <input value.bind="name & debounce:500">
  </label>

  <label>
    <span>What is your quest?</span>
    <select value.bind="quest">
      <option></option>
      <option repeat.for="q of quests">${q}</option>
    </select>
  </label>
</form>

<p if.bind="name">${welcome}, ${name}!</p>
<p if.bind="quest">Now set forth ${quest.toLowerCase()}!</p>

This example shows you some of the powerful features of the aurelia binding syntax. To learn further, please see our documentation.

Feeling excited? Check out how to use makes to get started in the next section.

Note: Please keep in mind that Aurelia 2 is still in beta. A number of features and use cases around the public API are still untested and there will be a few more breaking changes.

Getting Started

First, ensure that you have Node.js v8.9.0 or above installed on your system. Next, using npx, a tool distributed as part of Node.js, we'll create a new Aurelia 2 app. At a command prompt, run the following command:

npx makes aurelia

This will cause npx to download the makes scaffolding tool, along with the aurelia generator, which it will use to guide you through the setup process. Once complete, you'll have a new Aurelia 2 project ready to run. For more information on Aurelia's use of makes, see here. If you aren't interested in taking our preferred approach to generating a project, you can also see the examples folder in this repo for pure JIT setups (no conventions) with various loaders and bundlers.

Documentation

You can read the documentation on Aurelia 2 here. Our new docs are currently a work-in-progress, so the most complete documentation is available in our getting started section. If you've never used Aurelia before, you'll want to begin with our Quick Start Guide.

Contributing

If you are interested in contributing to Aurelia, please see our contributor documentation for more information. You'll learn how to build the code and run tests, how best to engage in our social channels, how to submit PRs, and even how to contribute to our documentation. We welcome you and thank you in advance for joining with us in this endeavor.

Staying Up-to-Date

To keep up to date on Aurelia, please visit and subscribe to the official blog and our email list. We also invite you to follow us on twitter. If you have questions, have a look around our Discourse forum. For chat on Aurelia 2, join our new Aurelia 2 community on Discord. If you'd like to join the growing list of Aurelia sponsors, please back us on Open Collective.

License

Aurelia is MIT licensed. You can find out more and read the license document here.

animator-velocity's People

Contributors

aaike avatar behzad888 avatar dabide avatar eisenbergeffect avatar fkleuver avatar plwalters avatar roustalski avatar strahilkazlachev avatar tarpsvo avatar zewa666 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

animator-velocity's Issues

Animations Not Working

I am following the instructions from http://gooy.github.io/aurelia-animator-velocity/#/ since I assume this is similar code (looks it to me).

I have registered the plugin

 .plugin("aurelia-animator-velocity");

I added au-animatate and anim-enter and anim-leave to the first element below the template element - example below

<template>
  <section class="au-animate" anim-enter="transition.slideRightBigIn;{duration:2000}" anim-leave="transition.slideRightBigOut;{duration:2000}">

Something is happening but it looks like, irrespective of what I try, only the default fadeIn and fadeOut animation is working and the options are largely ignored. The velocity pack is being loaded as far as I can see.

Can't install animate-velocity dependency

When running jspm install aurelia-animator-velocity this message is displayed:

warn github:julianshapiro/[email protected] dependency installs skipped as it's a GitHub package with no registry property set.
     If the dependencies aren't needed ignore this message. Alternatively set a registry or dependencies override or use the npm registry version at jspm install npm:velocity-animate@^1.2.3 instead.

This results in velocity not being installed and the plugin not working. Would it be possible to depend on the npm package instead?

Loading Error

Animator is loading - effects are not. Error shown below.

Velocity UI Pack: Velocity must be loaded first. Aborting.

velocity/velocity.ui is being loaded before velocity is being loaded.

This is from a bundle but I suspect the same will happen unbundled.

Force-feeding is not possible inline (cannot insert arrays)

I'm submitting a bug report

  • Library Version:
    1.0.1

Please tell us about your environment:

  • Operating System:
    Windows 10

  • Node Version:
    6.2.0

  • NPM Version:
    3.8.9

  • JSPM OR Webpack AND Version
    webpack 2.1.0-beta.17

  • Browser:
    all

  • Language:
    ESNext

Current behavior:
parseJSObject() function does not handle inline arrays correctly.

anim-enter="{ height: [200, 0], opacity: [1, 0] }" will be split by commas (,) and the resulting array will be a complete mess (instead of the expected key-value pairs).

Expected/desired behavior:
Force-feeding should be possible inline.

The Velocity animator appears to be leaking memory

I'm submitting a bug report

  • Library Version:
    1.1.0

Please tell us about your environment:

  • Operating System:
    OSX 10.12.4

  • Node Version:
    7.3.0

  • NPM Version:
    3.10.10
  • JSPM OR Webpack AND Version
    JSPM 0.16.52
  • Browser:
    all

  • Language:
    ESNext

Current behavior:
Simply using the Velocity animator in the following manner causes my transient view to remain in memory when navigating away (where this problem does not occur when I remove calls to the animator):

this.animator.animate(document.getElementById('recoveryErrorBox'), 'callout.shake');

I can actually recreate the problem at will by simply commenting any calls to the animator, and then uncommenting. But apart from the memory leak, everything works correctly.

Also, I should point out that I'm not using the declarative approach to animations at all. All animation is handled in the viewModel.

I believe the problem to be that there is no Velocity-oriented destroy method to call on the nodes involved in animation, and simply letting detach() do its thing is failing (the DOM nodes involved in animation remain).

DIAGNOSTIC STEPS TAKEN

  1. Rewound all the way to the point of simply importing and injecting the VelocityAnimator to see if the mere presence of it in the viewModel was the culprit. Not the case.

  2. I was calling animations in a task added to the taskQueue as a microTask, which led me to believe that I had a closure issue. I unwrapped the animation calls so that they were not being called from a microTask. It appears that calling from a microTask is not a factor in this memory leak.

  3. Calling this.animator.animate(...) from anywhere within the viewModel--whether from within a microTask or not--was, in fact, the culprit.

Expected/desired behavior:

  • What is the expected behavior?
    The VelocityAnimator should not be stranding DOM nodes so that they cannot be removed by Aurelia.

If the VelocityAnimator does require specific steps in the detach() handler, some guidance would be helpful.

Incomplete animator interface?

What is the intended use of this animator?

Right now if you try to use this as the only animator in the application you lose out of any templating features that make use of addClass or removeClass from the abstract Animator.

Is this implementation just missing those methods or is there some mixture of animators that should coexist?

Error when a list was hidden then displayed again before leaving animation completed

I'm submitting a bug report

  • Library Version:
    1.1.0

Please tell us about your environment:

  • Operating System:
    Windows 8

  • Node Version:
    6.9.2

  • NPM Version:
    4.3.0
  • JSPM OR Webpack AND Version
    Aurelia CLI 0.30.1
  • Browser:
    Chrome 60

  • Language:
    TypeScript 2.4.2

Current behavior:

  1. Create a project with au new.
  2. Add aurelia-animator-velocity as described here.

main.ts

import { Aurelia } from 'aurelia-framework'
import environment from './environment';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin('aurelia-animator-velocity', instance => {
      instance.enterAnimation.options.duration = 1000;
      instance.leaveAnimation.options.duration = 1000;
    })
    .feature('resources');

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }

  aurelia.start().then(() => aurelia.setRoot());
}

app.ts

export class App {
  private toggle = true;
  private items = [];

  constructor() {
    for (let i = 0; i < 5; i++) {
      this.items.push('item ' + i);
    }
  }
}

app.html

<template>
  <input type="checkbox"
    id="chk"
    checked.bind="toggle">
  <label for="chk">toggle</label>
  <div>
    <div class="au-animate"
      if.bind="toggle">
      <div repeat.for="item of items"
        class="au-animate">${item}</div>
    </div>
  </div>
</template>
  1. au run, load page, see "toggle" checkbox and list of 5 items. Click "toggle" checkbox twice under one second. The list is not shown and error in browser console:
Uncaught TypeError: Cannot read property 'item' of null
    at vendor-bundle.js:24268
    at ArrayRepeatStrategy.instanceChanged (vendor-bundle.js:24322)
    at Repeat.itemsChanged (vendor-bundle.js:23983)
    at Repeat.bind (vendor-bundle.js:23948)
    at Controller.bind (vendor-bundle.js:22055)
    at View.bind (vendor-bundle.js:20059)
    at If._runValueChanged (vendor-bundle.js:23746)
    at If.valueChanged (vendor-bundle.js:23701)
    at BehaviorPropertyObserver.selfSubscriber (vendor-bundle.js:22299)
    at BehaviorPropertyObserver.call (vendor-bundle.js:22165)
    at BehaviorPropertyObserver.setValue (vendor-bundle.js:22145)
    at If.descriptor.set [as value] (vendor-bundle.js:22254)
    at Object.setValue (vendor-bundle.js:9552)
    at Binding.updateTarget (vendor-bundle.js:10793)
    at Binding.call (vendor-bundle.js:10808)
    at SetterObserver.callSubscribers (vendor-bundle.js:6303)

Expected/desired behavior:

No error. List is shown.

Unable to animate 'enter' and 'leave' with custom animation names

I'm submitting a bug report

  • Library Version:
    1.0.1

Please tell us about your environment:

  • Operating System:
    Any

  • Node Version:
    6.2.0

  • NPM Version:
    3.8.9

  • JSPM OR Webpack AND Version
    webpack 2.2.0

  • Browser:
    all

  • Language:
    ESNext

Current behavior:
Executing this.animator.enter(this.view_self, 'customAnimation'); will always throw an Error due to:

https://github.com/aurelia/animator-velocity/blob/master/src/animator.js#L310-L326

Apparently, there's an unclear section of code in the _runElementAnimation(element:HTMLElement, name:string, options:any = {}, eventName:string = undefined): Promise<any> function, which restricts the custom function names to ONLY :enter and :leave.

Expected/desired behavior:
The effect name parameter should be checked against effects map instead and then should the error be thrown.

Issue with .d.ts file

Tried to use the .d.ts using typings but it won't compile - doesn't recognize velocity-animate module.

import velocity from 'velocity-animate';

I tried to include the velocity-animate.d.ts file in the project but the file does not include a declaration of the module - only extensions to JQuery.

There is no particular reason to include the line above - suggest removing it.

Aurelia CLI build errors with Velocity UI Pack

I'm submitting a bug report

Library Version: 0.17.0
Operating System: Windows 10
Node Version: 6.2.0
NPM Version: 3.8.9
Browser: Chrome
Language: TypeScript

As I migrated my project from Aurelia JSPM to the CLI I can no longer get Aurelia Velocity working. Below is the exact sequence, from scratch, that produces error (Also below). Aurelia with Velocity animations is really awesome, but I am really stuck on this problem.

Create Aurelia CLI project and then execute bash commands:
au new - Custom/Typescript/Sass/No Test/VSCode
npm install aurelia-animator-velocity --save
typings install dt~velocity-animate --save --global

Add dependencies into aurelia.json:
"velocity-animate",
{
"name": "aurelia-animator-velocity",
"path": "../node_modules/aurelia-animator-velocity/dist/amd",
"main": "aurelia-animator-velocity"
}

Add code to app.ts to bring in aurelia-animator-velocity:
import {VelocityAnimator} from "aurelia-animator-velocity";

Comment out below in aurelia-animator-velocity.d.ts (Separate Issue):
//import velocity from 'velocity-animate';

Running "au build" produces error below. The current issue is the path to velocity.ui.js should not contains src. Not sure if this a CLI issue or a velocity.ui.js path issue within animator-velocity.

...
Tracing aurelia-animator-velocity...
{ uid: 8,
  name: 'writeBundles',
  branch: false,
  error:
   { Error: ENOENT: no such file or directory, open 'C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\src\node_modules\velocity-animate\velocity.ui.js'
       at Error (native)
       at Object.fs.openSync (fs.js:634:18)
       at Object.fs.readFileSync (fs.js:502:33)
       at Object.exports.readFileSync (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\file-system.js:38:13)
       at amodroTrace.fileRead (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\bundled-source.js:83:31)
       at Object.context.fileRead (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:176:18)
       at Object.context.load (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:357:30)
       at Object.Module.load (eval at <anonymous> (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), <anonymous>:832:29)
       at Object.Module.fetch (eval at <anonymous> (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), <anonymous>:822:66)
       at Object.Module.check (eval at <anonymous> (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), <anonymous>:854:30)
     errno: -4058,
     code: 'ENOENT',
     syscall: 'open',
     path: 'C:\\Users\\...\\Documents\\Visual Studio 2015\\Projects\\Web\\AureliaVelocityWebsite\\node_modules\\velocity-animate\\velocity\\velocity.ui.js',
     moduleTree: [ 'aurelia-animator-velocity' ],
     fileName: 'C:/Users/.../Documents/Visual Studio 2015/Projects/Web/AureliaVelocityWebsite/node_modules/aurelia-animator-velocity/dist/amd/aurelia-animator-velocity.js' },
  duration: [ 2, 545471137 ],
  time: 1470870577009 }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.