As far as I fond the documentation, it looks like to define the callback for the animation, it's required to:
onfinish callbackIs there a way to do same things with one expression as below?
Snackbar.rootElement.animate([
{
opacity: 1,
transform: "none"
},
{
opacity: 0,
transform: "translateY(-200%)"
}
], {
duration: 500,
easing: "ease-in"
})
// ↓ [Warning] It just a desired syntax, NOT A VALID SYNTAX
.onfinish(() => {
Snackbar.rootElement.remove();
});
onfinish is a setter, not a method - if you assign to it instead of calling it as a function, it'll work:
console.log('start');
const d = document.createElement('div');
const res = d.animate([
{
opacity: 1,
transform: "none"
},
{
opacity: 0,
transform: "translateY(-200%)"
}
], {
duration: 500,
easing: "ease-in"
})
.onfinish = (() => {
console.log('finished');
});Another option, with addEventListener:
console.log('start');
const d = document.createElement('div');
const res = d.animate([
{
opacity: 1,
transform: "none"
},
{
opacity: 0,
transform: "translateY(-200%)"
}
], {
duration: 500,
easing: "ease-in"
})
.addEventListener('finish', () => {
console.log('finished');
});For similar reasons, the following doesn't work:
const obj = {
set foo(arg) {
console.log('called foo');
}
};
obj.foo(123);The setter can be invoked by assigning to it, but not by calling it as if it was a function (even though it is a function internally).