Jak sprawić, by element div nie zniknął podczas obrotu (90 stopni)

Question

Na mojej stronie mam div. W tym dziale mam "animację", która symuluje obrócone div (obrócone).

<div id="wrapper"> 
    <div id="content"> 
     Some content 
    </div> 
</div> 

Obracam "opakowanie" div na jQuery plugin transit. To, co robi wtyczka, to po prostu zastosować CSS;

transform: rotateY(180deg); 

Gdy div jest rotateY(90deg), muszę załadować jakąś nową treść w #content div. Zajmuje to minimalną ilość czasu, ale w animacji widać, że div został miniony/ukryty przed tym czasem.

SEE DEMO FIDDLE (zauważ, że nie ma rzeczywistego ładowania treści w tutaj)

Czy to możliwe, aby mieć nurkowania nie całkowicie znikają gdy jest rotateY(90)?

Niestety nie mam kontroli nad samym kodem HTML, ponieważ jest on generowany.

Answer 1

Spróbuj dodać grubość do niego. Zobacz coś takiego: want to show the thickness of an element while it rotate

Ale wykonaj animację css: 0%: transform: rotateY (0deg); 50%: transform: rotateY (90deg); 100%: transform: rotateY (180deg);

Mam nadzieję, że to pomoże.

Upewnij się, że wtyczka jQuery zawiera pliki css lub zajrzyj do niego.

A także można to zrobić za pomocą podstawowych css i jQuery.

Answer 2

Nie zmieniaj zawartości div, wystarczy utworzyć dwie strony:

<div id="wrapper"> 
    <div class="side-a"> 
     Some content 
    </div> 
    <div class="side-b"> 
     Some content 
    </div> 
</div> 

CSS:

#wrapper{ 
    transition: all 2s; 
    position: relative; 
} 
#wrapper.flip{ 
    transform: rotateY(180deg); 
} 
.side-a{ 
    z-index: 1; 
    opacity: 1; 
    position: absolute; 
    height: 100%; 
    transition-delay: 1s; //half the transition time of the wrapper 
} 
.side-b{ 
    z-index: 0; 
    opacity: 0; 
    transform: rotateY(180deg); 
    position: absolute; 
    height: 100%; 
    transition-delay: 1s; 
} 
.flip side-a{ 
    z-index: 0; 
    opacity: 0; 
} 
.flip side-b{ 
    z-index: 1; 
    opacity: 1; 
} 

Javascript:

$('.next-slide').click(function(){ 
    $('#wrapper').addClass('flip'); 
}); 
$('.prev-slide').click(function(){ 
    $('#wrapper').removeClass('flip'); 
});