Google+ как граница

Question

Я хочу понять, как работает потоковая передача элементов Google + border-left?Может ли каждое тело объяснить это или предложить какую-либо ссылку и / или статью?

Подробнее: Когда вы сосредоточитесь на потоке, вы увидите, что левая граница потока стала синей, а когда вы сосредоточитесь на другойпоток, граница будет анимирована для нового сфокусированного элемента.

1. фокус на элементе a
2. левая граница a переходит в синий цвет
3. фокус на элементе b
4. синяя рамка для левой границы элемента b

Благодаря любому предложению.

Answer 1

вот так: http://dev.pierre -cholhot.com / gplus-border.html

Answer 2

Вот один из них, если вы не хотите использовать jQuery и ориентированы только на самые последние браузеры.

Демонстрация: 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;       
}

Сценарий:

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

Если вы посмотрите на код HTML и CSS, вы увидите, что синяя рамка определяется hr классом CSS.Когда вы нажимаете конкретную запись в потоке, JavaScript добавит hr класс к этому <div>.Здесь начинается самое интересное.При нажатии на другой <div> произойдет несколько вещей:

• hr класс будет удален из предыдущего поста
• Новый <div> будет добавлен в конецстраница выглядит следующим образом:

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

• Таким образом, этот вновь созданный тег div будет иметь позицию и размер предыдущего ... em ...div.
• Теперь JavaScript контролирует ситуацию, изменяя CSS-свойство top до тех пор, пока оно не совпадет с позицией нажатой в данный момент записи.Высота div также изменена.Эта часть дает вам «анимацию».
• hr класс теперь добавлен в новую (нажатую) запись в потоке.
• Div, отвечавший за анимацию, удален из DOM (или скрыт).

Конечно, все это может быть не так, я просто знаю, что некоторое время играл с Firebug и поэтому советую вам:)

Answer 4

Google + добавляет синюю рамку на выбранные сообщения, прослушивая клики во внешнем div. Когда происходит щелчок, класс выделения удаляется из ранее выделенного элемента и добавляется к текущему элементу. Класс добавит ширину / цвет / стиль рамки к стороне, которую вы хотите выделить.

Answer 5

Вероятно, это использует CSS-переходы и псевдокласс: focus.