Как анимировать «: after» с помощью CSS или jQuery

У меня есть меню, которое выглядит следующим образом: Fiddle.Как анимировать «: after» с помощью CSS или jQuery

$(".squ").click(function() { 
 
    $('.pen').addClass('squ'); 
 
    $('.pen').removeClass('pen'); 
 
    $(this).removeClass("squ"); 
 
    $(this).addClass("pen"); 
 
});

.squ { 
 
    background-color: #0266B4; 
 
    width: 188px; 
 
    height: 21px; 
 
    position: relative; 
 
    text-transform: uppercase; 
 
    display: table; 
 
    margin: 7px 0 0 0; 
 
    color: white; 
 
    font-size: 14px; 
 
    transition: all 0.6s ease-in-out; 
 
    -o-transition: all 0.6s ease-in-out; 
 
    -moz-transition: all 0.6s ease-in-out; 
 
    -webkit-transition: all 0.6s ease-in-out; 
 
} 
 
.squ:hover { 
 
    background-color: #419EE6; 
 
} 
 
.squ p { 
 
    margin: 0; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding-left: 30px; 
 
} 
 
.sec1 .squ { 
 
    cursor: pointer; 
 
} 
 
.pen { 
 
    background-color: #419EE6; 
 
    width: 188px; 
 
    height: 21px; 
 
    position: relative; 
 
    text-transform: uppercase; 
 
    display: table; 
 
    margin: 7px 0 0 0; 
 
    color: white; 
 
    font-size: 14px; 
 
} 
 
.pen p { 
 
    margin: 0; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding-left: 30px; 
 
    transition: all 0.6s ease-in-out; 
 
    -o-transition: all 0.6s ease-in-out; 
 
    -moz-transition: all 0.6s ease-in-out; 
 
    -webkit-transition: all 0.6s ease-in-out; 
 
    cursor: default; 
 
} 
 
.pen:after { 
 
    content: ''; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-top: 10px solid transparent; 
 
    border-bottom: 11px solid transparent; 
 
    border-left: 22px solid #419EE6; 
 
    position: absolute; 
 
    transition: all 0.6s ease-in-out; 
 
    -o-transition: all 0.6s ease-in-out; 
 
    -moz-transition: all 0.6s ease-in-out; 
 
    -webkit-transition: all 0.6s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="pen"> 
 
    <p id="e-w" onclick="checkDisableCbs(this.id);">banana</p> 
 
</div> 
 

 
<div class="squ"> 
 
    <p id="qin" onclick="checkDisableCbs(this.id);">apple</p> 
 
</div>

При нажатии на один из элементов списка я переключаться между 2 классов. Выбранный получает класс (.pen), который имеет :after (CSS), который выглядит как стрелка.

Как я могу оживить его, как будто это происходит из DIV (слева направо)

источник

2016-01-06 Rick Sanchez

Вы не можете получить доступ к pseudoelements с JavaScript, что делает этот дубликат [этой] (http://stackoverflow.com/questions/17788990/access-the-css-after-selector-with-jquery), но поскольку вы также запрашиваете решения в CSS, возможно, у кого-то есть рабочий ответ. – adeneo

@adeneo Да, вы правы. Я сделал это. –

Просьба проверить, является ли мой ответ тем, что вы пытаетесь сделать? –

Вы должны уже иметь это определено. И затем используйте position для анимации. display и подобные вещи не могут быть анимированы (см. CSS Animatable Properties). Также то, что вы пытаетесь сделать, похоже на приведение чего-то от display: none до display: block.

Так что я делаю здесь:

Изменение .pen p::after к p::after с z-index: -1 и right: 15px, значение больше, чем его ширина.
Анимация right property to right: 15px; или где-то он точно соответствует.
Исправлено имущество top: 0;.
Чтобы сделать это , всегда работающим, делегируйте события возможному статическому родительскому объекту. Вы назначаете class, который изменяется от нажатия. Так что это не статично.

Рабочая Отрывок

$(document).on("click", ".squ", function() { 
 
    $('.pen').addClass('squ'); 
 
    $('.pen').removeClass('pen'); 
 
    $(this).removeClass("squ"); 
 
    $(this).addClass("pen"); 
 
});

.squ { 
 
    background-color: #0266B4; 
 
    width: 188px; 
 
    height: 21px; 
 
    position: relative; 
 
    text-transform: uppercase; 
 
    display: table; 
 
    margin: 7px 0 0 0; 
 
    color: white; 
 
    font-size: 14px; 
 
    transition: all 0.6s ease-in-out; 
 
    -o-transition: all 0.6s ease-in-out; 
 
    -moz-transition: all 0.6s ease-in-out; 
 
    -webkit-transition: all 0.6s ease-in-out; 
 
} 
 

 
.squ:hover { 
 
    background-color: #419EE6; 
 
} 
 

 
.squ p { 
 
    margin: 0; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding-left: 30px; 
 
} 
 

 
.sec1 .squ { 
 
    cursor: pointer; 
 
} 
 

 
.pen { 
 
    background-color: #419EE6; 
 
    width: 188px; 
 
    height: 21px; 
 
    position: relative; 
 
    text-transform: uppercase; 
 
    display: table; 
 
    margin: 7px 0 0 0; 
 
    color: white; 
 
    font-size: 14px; 
 
} 
 

 
.pen p { 
 
    margin: 0; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding-left: 30px; 
 
    transition: all 0.6s ease-in-out; 
 
    -o-transition: all 0.6s ease-in-out; 
 
    -moz-transition: all 0.6s ease-in-out; 
 
    -webkit-transition: all 0.6s ease-in-out; 
 
    cursor: default; 
 
} 
 

 
p::after { 
 
    content: ''; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-top: 10px solid transparent; 
 
    border-bottom: 11px solid transparent; 
 
    border-left: 22px solid #419EE6; 
 
    position: absolute; 
 
    transition: all 0.6s ease-in-out; 
 
    -o-transition: all 0.6s ease-in-out; 
 
    -moz-transition: all 0.6s ease-in-out; 
 
    -webkit-transition: all 0.6s ease-in-out; 
 
    right: 15px; 
 
    z-index: -1; 
 
    top: 0; 
 
} 
 

 
.pen p::after { 
 
    right: -20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="pen"> 
 
    <p id="e-w" onclick="checkDisableCbs(this.id);">banana</p> 
 
</div> 
 
<div class="squ"> 
 
    <p id="qin" onclick="checkDisableCbs(this.id);">apple</p> 
 
</div>

источник

2016-01-06 14:32:18

Как анимировать «: after» с помощью CSS или jQuery

ответ

Смежные вопросы