TL;DR
The codepen is at the end of the post
Let's build this:
⚠️Important
Before diving into how to make this, it's important to note ...
For further actions, you may consider blocking this person and/or reporting abuse
AWESOME!!!!!!!!!!!!!!!!!!!!!!!!!!!
how about 'hover event', ex: mouseenter/mouseleave? I dont see any result in the Internet T_T
Hey @phongpticdvn, thanks for the message.
If you change the eventListener to mouseenter, it should work when hover the button, like this
button.addEventListener('mouseenter', ....(on line 4)But I'm not sure if that is what you need, you have an example to illustrate the effect you are trying to do?
I know that but the event i triggered continously, try it at: w3schools.com/tags/tryit.asp?filen...
with this script code:
const details = document.querySelector('details')const summary = document.querySelector('summary')
summary.addEventListener('mouseenter', (event) => {
console.log(event)
event.preventDefault()
document.startViewTransition(() => {
details.setAttribute('open', '')
})
})
I think you want to animate the element when open/close, right?
I didn't try that yet. Although I found a blog post on dealing with this animated element, here: css-tricks.com/how-to-animate-the-...
It uses the Web Animation API insted of View Transition API, but maybe is this the effect you are looking for, and it will work in all browsers, hope it helps
Hey @phongpticdvn, check this out 🎉
youtube.com/watch?v=Vzj3jSUbMtI