search

Rich-Harris / ramjet

Morph DOM elements from one state to another with smooth animations and transitions
http://www.rich-harris.co.uk/ramjet/
MIT License
5.45k stars 158 forks source link

Morph border radius #25

Closed julesbou closed 9 years ago

julesbou commented 9 years ago

When manually editing CSS styles on example page, border-radius property is not morphed

capture d ecran 2015-05-04 a 18 33 09 screenshot

Rich-Harris commented 9 years ago

Yes! Last night I created a new border-radius branch to try and solve this issue. It's not totally straightforward - if the elements are the same shape, it works...

border-radius

...but if they're a different shape, the transform stretches the corners so they don't overlap:

border-radius2

(It's subtle, but you can probably see what I'm talking about - the corners don't quite line up.) So we'll have to compensate for the transform when setting the border-radius (I didn't realise this until just now, but you can use two radii for each corner, which is exactly what we need to compensate for the 'stretch', which is great news because it means that this is in fact possible.)

Hopefully I'll get a chance to work on this soon.

Anyway, to your example: is the original border radius preserved, at least? It looks as though it isn't, but when I do the same thing locally I can see the blue circle beneath the translucent green square. Which is odd...

Rich-Harris commented 9 years ago

Right, I think I've got this sussed:

brad

You can also see it in action on the ramjet homepage (iOS grid example at the bottom). Released in 0.4.5

julesbou commented 9 years ago

works like a charm :)