Comments (10)
@weotch check out the above spec ^ .. does that work for your auto-hide request?
tram also now has a show() shortcut as well. so you can do this:
tram(element).show().start({ etc })
from tram.
In your show()
example, will it defer
the start so you still see the animation? Rather than that annoying css3 thing where if you toggle display:none on the same tick as a transition it doesn't show?
from tram.
@weotch of course, man ;) every start() is actually deferred a single animation frame.
hide() is also smart in that it stops the tram before setting display: none.
from tram.
Here's a test showing how tram works with display: none. http://bkwld.github.io/tram/test/display-none.html
from tram.
Was thinking of finally making some macros. Is the API for them gonna change you think?
from tram.
@weotch currently there are no macros... we'd need to define how that works.
from tram.
from tram.
Exactly. I do like the idea of the thenHide
helper method.
from tram.
Regarding defining how it works, what about an API like:
// Define it. `tram` is the AMD module
tram.macro('fadeOut', function() { this.add('opacity 300ms').start({opacity:0}).then(function() { this.hide(); }); });
// Use it
$el.tram().macro('fadeOut');
Note: I edited this
from tram.
Been thinking more about macros, and I don't think we need to write any code to support them. Tram already supports passing functions to the start()
method. Here's an example of a "fadeOut macro" with a customizable time value:
tram(el, fadeOut(800));
function fadeOut(time) {
if (time == null) time = 500;
return function () {
this
.add('opacity ' + time)
.start({ opacity: 0 })
.then(function () {
this.hide();
});
};
}
Working jsbin example here.
from tram.
Related Issues (20)
- Bad selectors throw a fatal error HOT 2
- Support SVG dash offset
- Add failsafe for rAF bug in iOS Chrome HOT 1
- Getting an undefined on `wait()` HOT 3
- Make it possible to chain tram onto jquery HOT 2
- Allow set() to apply "auto" HOT 6
- Support chaining with wait() HOT 3
- GPU layering approach info? HOT 2
- Git rid of Makefile?
- jQuery Collections Ignore 'Then' HOT 1
- Warning: No active transition timer HOT 5
- Matrix transform support? HOT 8
- Call then() after something has had stop() called HOT 6
- Support for IE HOT 2
- The transform example did not work on Chrome Version 34.0.1847.137 m HOT 4
- Project still maintained? HOT 1
- Feature idea: specify time using number only HOT 2
- Support CSS filters
- Test `display: none` + set() + start()
- Fix unit tracking in transform properties
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tram.