Ajax图像页面过渡

I just saw a really cool page transition on Behance where you click a image and it just expands to a new div (I think) with a with of 50%. Can someone explain to me how to make this work or have an example? Transition here:

https://vimeo.com/162486588

You can use css transitions if you like. Check the example that I wrote for you.

.normal {
    float: left;
    margin-right: 10px;
    width: 10%;
    height: auto;
    transition: width 2s, height 2s;
}

.transition {
    width: 50%;
    height: auto;
}

Basically they work by defining 'start' values (in our case width & height inside .normal) and also a definition of how to make the transition and what properties to apply it to (in our case width and height with 2s duration each).

If you now add a class to the element that has the properties with different values (in our case .transition), they'll be animated to the new value.

To complete the example, I also added some text that is faded in after the transition has been completed.

The javascript part is fairly simple: When clicking the image, add the .transition class, then wait for 2 seconds (the transition duration) and finally fade in the text.

$('img').click(function() {
    $(this).addClass('transition');
    setTimeout(function() {
            $('.text').fadeIn();
    }, 2000);
});