Почему элемент начинает свой переход / преобразование css3 в верхнем левом углу окна?

Question

Это немного раздражает: у меня есть div, который начинает свой переход с левого верхнего угла окна, даже если он расположен где-либо еще в документе. Я попытался usign -webkit-transform-origin безуспешно, возможно, я использовал это неправильно. Кто-нибудь может мне помочь? :) Вот код ... все это, но я прокомментировал соответствующие части - которые в основном внизу.

Вот живая версия кода.

<style>
    #pool{
        width:100%;

    }
    .clickable{
      <!-- class of the element being transitioned -->
        display:inline;
        margin-right: 5px;
        -webkit-transition: all 500ms ease;
        position: absolute;
    }

    .profile_image{
        border: solid 1px black;
        -webkit-transition: all 500ms ease;
        position:relative;
    }
</style>
<section id="pool"></section>
<script>
    var Cache = {};
    Cache.hasItem = function(item_key){
        if(!localStorage.getItem(item_key)){
            return false;
        }else{
            return true;
        }
    }   
    Cache.storeItem = function(key, value){
        localStorage.setItem(key, value);
    }
    Cache.fetch = function(key){
        return jQuery.parseJSON(localStorage.getItem(key));
    }
    Cache.clear = function(key){
        localStorage.removeItem(key);
    }

    var Twitter = {};
    Twitter.url = "http://api.twitter.com/1/statuses/public_timeline.json?callback=?";
    Twitter.getFeed = function(){
        console.log("Fetching...");
        $.getJSON(Twitter.url, function(json){
            Cache.storeItem('feed',JSON.stringify(json));
        })
        .complete(function(){
               //to be implemented
            console.log("Completed");
        })
    }



        if(!Cache.hasItem('feed')){
            Twitter.getFeed();
        }

        var feed = Cache.fetch('feed');
        for(var i in feed){
            var entry = feed[i];
            var element = '<div id="'+i+'" class="clickable"><img class="profile_image" src="'+entry.user.profile_image_url+'"/></div>';
            $("#pool").append(element);
        }
</script>





<script>
    $(".profile_image").click(function(e){
        var target = $(e.target);
        var parent = target.parent();

        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var newWidth = 500;
        var newHeight  = 100;
        var newX = (windowWidth-newWidth)/2;
        var newY = (windowHeight-newHeight)/3;

            /************HERE'S THE PROBLEM*******/
        parent.css('background-color','red');
        parent.css('display','inline');
        parent.css('position','fixed'); // tried absolute and inherit as well
        parent.css('z-index','3');
        parent.width(newWidth).height(newHeight).offset({top:newY, left:newX});


    })
</script>

Результаты: С помощью jfriend00 мне удалось это исправить. Вот код:

<style>
    #pool{
        width:100%;
        display: inline;

    }
    .clickable{
        display: inline-block;
        margin-right: 5px;
        position: scroll;

    }

    .profile_image{
        border: solid 1px black;


    }
</style>

И Javascript:

<script>
    $(".profile_image").click(function(e){
        var target = $(e.target);
        var parent = target.parent();

        targetOffset = target.offset();
        parentOffset = parent.offset();


        target.css('top',targetOffset.top-5);
        target.css('left',targetOffset.left-5);
        parent.css('top',parentOffset.top);
        parent.css('left',parentOffset.left);

        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var newWidth = 500;
        var newHeight  = 100;
        var newX = (windowWidth-newWidth)/2;
        var newY = (windowHeight-newHeight)/3;

        parent.css('-webkit-transition', 'all 500ms ease');
        parent.css('background-color','red');
        parent.css('position','absolute');
        parent.css('z-index','3');
        parent.width(newWidth).height(newHeight).offset({top:newY, left:newX});


    })
</script>

Answer 1

Мне кажется, что вы меняете положение объекта относительно фиксированного при щелчке (вместе с несколькими другими изменениями стиля).Когда вы изменяете его на фиксированный, объект больше не позиционируется в потоке страницы и перемещается в левую и верхнюю позиции на странице, что не похоже на то, что вы инициализировали - таким образом, они устанавливаются в (0,0) так вот где объект переходит, когда вы меняете его положение на фиксированное (вверху / слева страницы).

Если вы хотите, чтобы они перешли с того места, на котором они находились, вам придется рассчитать их исходное положение на странице и установить верхнее и левое значения для тех же значений в том же коде, в котором вы установили фиксированное положение.

Я бы предположил, что в jQuery есть функция для расчета абсолютной позиции объекта на странице, чтобы вы могли использовать ее (в YUI есть такая функция, поэтому я предполагаю, что jQuery, вероятно, тоже).Поскольку вы используете «фиксированный», вам, возможно, придется исправить это для положения прокрутки или использовать «абсолютный» вместо «фиксированный».Одна из сложностей здесь заключается в том, что вам нужно изменить положение и верх / лево, не подвергая их переходу CSS, потому что вы хотите, чтобы эти атрибуты изменились немедленно.Затем вы включаете переходы и устанавливаете конечную позицию.