为什么一个元素的css3过渡/变形始于窗口左上角？

Question

这有点烦人：我有一个div，即使在文档的其他位置，它也从窗口的左上角开始过渡。我尝试使用-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>

- Jorge Guberte

Answer 1

在我看来，您在点击时更改了对象的位置，从相对位置变为固定位置（还有其他一些样式更改）。当您将其更改为固定位置时，该对象不再位于页面流中，并且它会跳到页面的左上角位置，这似乎您没有初始化-因此它们设置为（0,0），所以当您将其位置更改为固定位置（页面顶部/左侧）时，对象就会跳到那里。

如果您希望它们从原来的位置过渡，您需要在将位置设置为固定位置的同一代码中计算它们在页面上的原始位置，并将顶部和左侧设置为这些值。

我认为jQuery可能有一个函数可以为您计算页面上对象的绝对位置，因此您可以使用它（YUI有这样的函数，因此我认为jQuery也可能有）。由于您正在使用“fixed”，因此您可能需要根据滚动位置进行更正，或者使用“absolute”而不是“fixed”。这里的一个挑战是您需要更改位置和顶部/左侧，而不受CSS过渡的影响，因为您希望这些属性立即更改。然后，您启用过渡并设置最终位置。

- jfriend00

---

谢谢！你的解决方案完美地运作了。现在的挑战是防止未被点击的元素在其中一个元素被转换时填充其左侧的空白空间。嘿嘿 - Jorge Guberte