Comments (11)
let me take a look at it, because this would also potentially mess with anything that has a transition/animation for insertion or whatever.
from showmy.chat.
correct. the idea behind FLIP is First Last Invert Play. (this is how the vue transition component works.)
Basically, we give 3 classes/attributes for animation/transition.
enter-from/leaving-from
state - This is the initial state we need to be in to make the transition work (eg:opacity:0;
for ourenter-from
state, oropacity:1;
for ourleaving-from
state)enter-active/leaving-active
state - this is where you'd define the transition or animation you'd want to use (egtransition: opacity 1s ease;
).enter-to/leaving-to
state - this is where you'd apply the end state of your transition (egopacity:1;
for ourenter-to
state oropacity:0;
for ourleave-to
state)
the implementation works as follows:
apply both the from
state and the active
state. then remove the from
state and apply the to
state. listen for transition/animation end and then remove the active
and to
states.
Let me see if I can get more information about the best way to listen for this.
from showmy.chat.
do animations fire a transitionend
event?
from showmy.chat.
@fimion Animations fire an animationend
event, but I don't believe they fire transitionend
.
We're using both transitionend
and animationend
as cues to go ahead and remove the element, and they work well from what we've seen.
From src/scripts/utilities.mjs
// Give animation a chance
messageToDelete.addEventListener(
'transitionend',
_callbackRemoveMessageFromDom
);
messageToDelete.addEventListener(
'animationend',
_callbackRemoveMessageFromDom
);
// If no animation, delete anyways
setTimeout(_callbackRemoveMessageFromDom, 1200);
In case of no animation/transition, or an animation/transition that takes too long, we have that setTimeout
call that'll delete the node anyways after 1.2 seconds.
The animationend
/transitionend
work well — if a theme supplies some sort of "deleting" animation that takes less than 1.2 seconds, it'll be respected, and the element will be deleted immediately after the animation/transition is done.
The trouble here is in cases where themes don't supply a "deleting" animation/transition, meaning that the overlay will wait a full 1.2 seconds to make time for an animation/transition that isn't happening.
from showmy.chat.
use getComputedStyles
to check for an animation or transition?
from showmy.chat.
Also, context on why 1.2 seconds: I figured the absolute longest a "deleting" message should take should be one second. Ideally, deletions would take even less time — since oftentimes, the goal is to clear up space or remove spam and bigotry, and so the goal should be to make sure the message GTFOs. With a 1 second max deletion time, I gave an extra 0.2 sec as a bit of a buffer — hence 1.2 seconds.
from showmy.chat.
use
getComputedStyles
to check for an animation or transition?
@fimion I think this could work! Any chance you'd be interested in (and available for) spinning up a PR?
from showmy.chat.
For sure. For what it's worth, now that we've established data-twitch-message-display-status="deleting"
as a precedent, I'd be comfortable setting data-twitch-message-display-status="incoming"
(or similar) for new messages, and porting existing themes' entrance animations to that hook.
from showmy.chat.
we might also need to set up full FLIP style classes for things so that it is easier to handle transitions/animations
from showmy.chat.
Not knowing anything about FLIP, would setting up a FLIP approach like that still afford the stylesheet full control over the entrance/exit animations? (i.e. themes don't have to modify the JavaScript to get custom animations?)
from showmy.chat.
Iiiinteresting. I'd be open to exploring this!
from showmy.chat.
Related Issues (20)
- Improve `showCommands` experience in URL builder HOT 1
- [feature request] Add badge to names HOT 8
- Allow themes to style `/announce` messages HOT 1
- [Docs] Homepage should explain what this is and how to use it more clearly
- Bug: long links are causing scrollbars on the default theme HOT 2
- Document available css custom properties available for developers HOT 1
- [feature request]: Hotdog based theme HOT 1
- Allow config for buffering messages
- Create progress bar for fundraisers HOT 3
- [feature request] Elevated message flag? HOT 1
- Automatic dependency updates HOT 1
- Document all stylehooks a theme can use
- Allow users to bring their own styles HOT 7
- Let users customize themes with URL-encoded styles HOT 3
- Create a guide for integrating with OBS
- Provide textual descriptions for themes in the HTML for accessibility HOT 3
- Testing Discord webhook; please disregard. HOT 2
- [Lint] Disable `no-descending-specificity` Stylelint rule HOT 1
- show latest messages causes lockup
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 showmy.chat.