Google+ like border

Question

I want to understand how Google+'s stream items border-left works? Can every body explain it or suggest any link and/or article?

More: When you focus on a stream, you'll see that the left-border of stream gone to blue, and when you focus on another stream, the border will animate to new focused item.

1. focus on element a
2. a's left-border gone to blue
3. focus on element b
4. the blue-border animate to element b's left-border

Thanks to any suggestion.

Answer 1

你去了： http ： //dev.pierre-cholhot.com/gplus-border.html

Answer 2

Here's one if you don't want to use jQuery and only target the latest browsers.

Demo: http://jsfiddle.net/ThinkingStiff/9UUb9/

HTML:

<div id="posts-frame">
    <div id="highlight"></div>
    <ul id="posts">
        <li class="post">post one</li>
        <li class="post">post two</li>
        <li class="post">post three</li>
        <li class="post">post four</li>
    <ul>
</div>

CSS:

#highlight {
    border-left: 1px solid #4D90F0;    
    height: 0;
    margin-left: 1px;
    position: absolute;
    top: 0;
    transition:             top 200ms ease, height 200ms ease;
        -moz-transition:    top 200ms ease, height 200ms ease;
        -ms-transition:     top 200ms ease, height 200ms ease;
        -o-transition:      top 200ms ease, height 200ms ease;
        -webkit-transition: top 200ms ease, height 200ms ease;
}

.post {
    border: 1px solid lightgray;
    display: block;
    height: 45px;
    padding-left: 4px;
}

.post:nth-child( 2 ) {
    height: 70px;    
}

#posts {
    padding: 0;
    margin: 0;  
    width: 400px;
}

#posts-frame {
    position: relative;       
}

Script:

function selectPost( event ) {

    var highlight = document.getElementById( 'highlight' );
    highlight.style.height = event.target.clientHeight + 'px';
    highlight.style.top = ( event.target.offsetTop + 1 ) + 'px';

};

document.getElementById( 'posts' ).addEventListener( 'click', selectPost, false);

Answer 3

If you look at HTML and CSS code, you will see that blue border is defined by hr CSS class. When you click specific stream post, JavaScript will add hr class to this <div> . Here comes the fun part. When you click on another <div> few things will happen:

• hr class will be removed from previous stream post
• A new <div> will added to the bottom of a page, it looks like this:

<div class="rh kA" style="left: 0px, top: 73px, width: 572px, height: 318px;"></div>

• So this newly created div tag will have the position and size of previous... em... div.
• JavaScript is now in control, changing the top CSS property, until it will match position of currently clicked post. The height of div is also changed. This part gives you "animation".
• hr class is now added to new (clicked) stream post.
• The div that was responsible for animation is deleted from DOM (or hidden).

Of course this all may be wrong, I just know it from playing with Firebug for a while, and so I advise it to you :)

Answer 4

这可能是使用CSS转换和：focus伪类。

Answer 5

Google+ adds the blue border on selected posts by listening for clicks within the outer div. When a click happens the highlight class is removed from the previously highlighted item and added to the current item. The class will add a border width/color/style to the side you want highlighted.