search

Cardshifter / HTML-Client

HTML/CSS/JS-based client for Cardshifter
http://cardshifter.zomis.net
Apache License 2.0
13 stars 5 forks source link

Card animations in Vue client #148

Closed Phrancis closed 6 years ago

Phrancis commented 6 years ago

The Angular client had some damage animations where a partly transparent "shadow" of the health/damage buttons would float up for a short time, this made it easier to follow along what is going on in the game.

We should make this as modular/flexible as possible, so that it could potentially be used for other things, like player's health, mana or scrap.

Phrancis commented 6 years ago

Some animations have been added on commit 1c50b9f6

Zomis commented 6 years ago

https://i.stack.imgur.com/n9cjr.gif

Phrancis commented 6 years ago

@Zomis I believe what you are looking for is the z-index CSS property, here's a small demo on JSFiddle: jsfiddle.net/fhkf4bxo

Both the "fixed" button that displays the actual value, and the "floating" animated button need to be on top of each other, with the fixed one having a higher z-index than the floating one.

Once we have this working properly, I think we should try out a bounce effect like in this demo instead of a slide effect, that would "pop out" more.

Zomis commented 6 years ago

@Phrancis It's not just the z-index I'm looking for, but also some mix of position: absolute I think.