Comments (6)
Why not use start()
to start it back up again?
from tram.
Here's my use case: https://gist.github.com/weotch/9494115#file-view-js
It's for a carousel slider. I want to set the old slide to display:none
after the new slide has finished transitioning. But if you're spamming clicks, the then()
never gets fired. Here's me trying what I think you're talking about: https://gist.github.com/weotch/9494115#file-workbench-js
But that didn't solve it for me. Am I missing your point?
from tram.
In that case, I would suggest some sort of cleanup function that filters out the non-current slides and sets them to display:none
, so you can call it after the current queue has finished.
from tram.
I think I'll do this, just not use then()
in this case.
// Change the page
View.change = function(e, new_page) {
// Make sure old page has lower z-index and stop any trams.
// Note: calling set() invokes stop()
var old = this.$slides.eq(e.previous('page')).tram()
.set({'z-index': 1})
;
// Hide the old one after the transition is done. Don't use
// then() because it won't be fired if the animation is stopped.
_.delay(function() {
old.set({display: 'none'});
}, 300);
// Animate in new page
this.$slides.eq(new_page).tram()
.add('opacity 300ms')
.set({ display: 'block', opacity: 0, 'z-index': 2} )
.start({ opacity: 1})
;
};
Feel free to close the ticket if this isn't something you think is needed in tram.
from tram.
You could also use the tram.delay
utility to ensure the timing stays in sync with the animations:
tram.delay(300, function () {
// Hide non-current slides, but remember when this executes, the current slide may be changed ;)
});
from tram.
Oh, thanks for the tip.
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
- 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.