javascript - 为什么一个元素从窗口的左上角开始它的 css3 转换/转换？

Question

这有点烦人:我有一个 div，它从窗口的左上角开始过渡，即使它位于文档的其他任何位置。我试过 usign -webkit-transform-origin 但没有成功，也许我用错了。有人可以帮助我吗？ :)这是代码……全部，但我对相关部分进行了评论 - 主要位于底部。

Here's a live version of the code.

<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 转换的影响，因为您希望这些属性立即更改。然后，启用转换并设置最终位置。