Comments (2)
The thing that the library tries very hard to achieve is making sure that your transition will start running before the browser gets to paint. We do this by always using microtasks. Compliant browsers will not paint while there are pending microtasks.
Once a transition is running, paints will happen, so you do need to use the start of the transition to get things into the right style.
That said, insertedSprites
are supposed to begin hidden by default, and they don't appear until you apply the first motion to them. So maybe we have a bug. See the places where we call reveal()
and hide()
on Sprite
.
from ember-animated.
Just wanted to drop in and say this is still happening with [email protected]
and [email protected]
Here's a minimum reproducible example:
import { fadeIn, fadeOut } from 'ember-animated/motions/opacity';
export default class AnimatedIfCustomTransition extends Component {
@tracked itemVisible = false;
customTransition = function* ({ insertedSprites, removedSprites, keptSprites, duration }: TransitionContext) {
yield Promise.all(
removedSprites.map((sprite) => {
return fadeOut(sprite, { duration: duration / 2 });
})
);
for (let sprite of insertedSprites.concat(keptSprites)) {
fadeIn(sprite, { duration: duration / 2 });
}
};
@action
toggleItemVisible(val: boolean) {
this.itemVisible = val;
}
}
As stated in the original comment, applying an opacity
of 0
at the start of the animation fixes things:
customTransition = function* ({ insertedSprites, removedSprites, keptSprites, duration }: TransitionContext) {
for (let sprite of insertedSprites.concat(keptSprites)) {
sprite.applyStyles({ opacity: '0' });
}
yield Promise.all(
removedSprites.map((sprite) => {
return fadeOut(sprite, { duration: duration / 2 });
})
);
for (let sprite of insertedSprites.concat(keptSprites)) {
fadeIn(sprite, { duration: duration / 2 });
}
};
from ember-animated.
Related Issues (20)
- [DOCS] Initial homepage for ember-animated has too much whitespace between lines HOT 1
- Embroider Compatibility: animated-container's dynamic Tag breaks build HOT 3
- Information on testing ember-animated in docs HOT 2
- Why do we need `assert-never` in `dependencies`? HOT 2
- Ember Global deprecation warning due to old version of ember-cli-babel in ember-animated HOT 2
- Consider public export of TransitionContext type HOT 1
- Attempted to resolve -element, which was expected to be a helper, but nothing was found HOT 5
- Embroider: ember-animated is trying to import from rsvp but that is not one of its explicit dependencies HOT 1
- 1.x breaks animated-outlet HOT 10
- TypeError: yield* (intermediate value)(intermediate value) is not iterable after removing IE11 from transpilation targets HOT 1
- `startTranslatedBy` and `endTranslatedBy` modify the initial and final bounds width/height
- AnimatedOrphans' documentation looks broken HOT 2
- Memory leak in emberAnimatedSingleton HOT 6
- Incompatibility with ember-element-helper v0.6.1 and Embroider optimized HOT 8
- Types are not resolveable with sufficiently new enough TypeScript
- Error after upgrade from `1.0.4` to `1.1.0` HOT 3
- Glint ember-animated/template-registry not found HOT 2
- v1.1.3 is missing type declarations HOT 4
- Documentation code examples rendering wrong
- App broken after upgrade from 2.0.0 to 2.0.1 HOT 1
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 ember-animated.