problems with CSS3 transform and transition

Question

user clicks menu option:

current contents of div swirl, get small and disappear
those contents are replaced with other contents via replaceChild
the new contents start small, swirl and show

if the old and new contents are the same, it works fine; but if different, the swirl down works but the new contents simply appear full size after 500ms

when it works, the effect is quite nice

here's a complete working example:

<html>
<head>
<script>
var d1 = document.createElement('div');
d1.className = 't';
d1.innerHTML = 'testing1';
var d2 = document.createElement('div');
d2.className = 't';
d2.innerHTML = 'testing2';
function test(no) { 
    // current
    var cur_dom = document.body.getElementsByTagName('div')[0];
    cur_dom.style.webkitTransform = "rotate(180deg) scale(0.1)";
    setTimeout( step2, 500 );
    // new
    function step2() {
            // replace node with part
            var new_dom = (no==1) ? d1 : d2;
            cur_dom.parentNode.replaceChild(new_dom,cur_dom);
            new_dom.style.webkitTransform = "rotate(0deg)";
    }
    return false;
};
</script>
<style>
div     { border: 1px solid red; }
div.t   { -webkit-transform: rotate(180deg) scale(0.1);
    -webkit-transition: -webkit-transform ease-in-out 500ms; }
</style>
</head>
<body>
<a href='#' onclick='return test(1)'>test1</a>
<a href='#' onclick='return test(2)'>test2</a>
<div class='t'>this will be replaced</div>
</body>
</html>

Your problem is a bit difficult to grasp. Can you provide a working sample? — RoToRa
– RoToRa, Commented Mar 31, 2011 at 13:16
@RoToRa - now have complete working example as single html file — cc young
– cc young, Commented Mar 31, 2011 at 15:51

cc young · Accepted Answer · 2011-03-31 13:21:07Z

1

took the coward's way out and, instead of dom assignment, copied the innerHTML of the new dom to the existent dom, and rotated it

cur_dom.innerHTML = new_dom.innerHTML;
cur_dom.style.style.webkitTransform = "rotate(0deg)";

works just fine. but still ugly.

answered Mar 31, 2011 at 13:21

cc young

20.5k32 gold badges95 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RoToRa · Accepted Answer · 2011-04-01 10:25:05Z

0

The problem is that the new element you put in place isn't rotated. You basically solved the problem, and it's not ugly, but the correct thing to do. You can also leave out the generation of the "replacement" DIVs and just change the content of the original one:

        cur_dom.innerHTML = (no==1) ? 'testing1' : 'testing2';
        cur_dom.style.webkitTransform = "rotate(0deg)";

Working example: http://jsfiddle.net/CTxVu/

answered Apr 1, 2011 at 10:25

RoToRa

38.5k12 gold badges73 silver badges110 bronze badges

1 Comment

cc young Over a year ago

I think you're right. I can do the replacement, but I need to do it one level lower than the actual div getting rotated.

Collectives™ on Stack Overflow

problems with CSS3 transform and transition

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related