Перемещение страницы изображения Ajax

Question

Я только что увидел действительно классный переход на страницу Behance, где вы нажимаете изображение, и оно просто расширяется до нового div (я думаю) с 50%. Может кто-нибудь объяснить мне, как сделать эту работу или привести пример? Переход здесь:

https://vimeo.com/162486588

Answer 1

Вы можете использовать css transitions, если вам нравится. Проверьте example, что я написал для вас.

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

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

В основном они работают путем определения значений «Start» (в нашем случае ширина & высота внутри .normal), а также определение того, как сделать переход и какие свойства, чтобы применить его к (в нашем случае width и height с продолжительностью 2 с).

Если вы теперь добавите класс к элементу, у которого есть свойства с разными значениями (в нашем случае .transition), они будут анимированы к новому значению.

Чтобы завершить этот пример, я также добавил текст, который исчезнет после завершения перехода.

Часть javascript довольно проста: при нажатии на изображение добавьте класс .transition, затем подождите 2 секунды (продолжительность перехода) и, наконец, исчезнет в тексте.

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