Hiroshima
@Hiroshima
Ровный пацанчик нигде не пропадет !

Как сделать чтобы анимация срабатывала по нажатию?

Как сделать чтобы при нажатии на (focus) кнопку с классом "but-p" срабатывала анимация на одной кнопке ?
анимация должна переворачивать стрелку вверх.
5f8442bf7fde5672529049.png
Данный класс "but-p" присутствует и на других кнопках где есть стрелка !

.but-p {
                font-size: 14px;
                height: 30px;
                text-align: left;
                padding: 2px 0px 2px 10px;
                border: none;
                background-color: #fff;
                outline: none;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #8a8a8a;
                cursor: pointer;
                width: 100%;
                margin: 10px 0;
                position: relative;
            }
            
            .but-p:focus { 
                box-shadow: 0 0 10px rgb(255, 255, 255);
                transition: 0.2s;
            }
            
            .strelka {
                width: 15px;
                transform: rotate(0deg);
                transition: 0.3s;
                padding: 0 20px;
                position: absolute;
                right: 0;
            }
            
            .strelka:focus { /* 1 */
                transform: rotate(180deg);
            }


(комментарий:1) - ну по моей логике это вот так должно быть, тока чтобы на одной кнопке срабатывала, а не на всех.

Я конечно знаю как сделать то что я хочу, но это будет не правильно (взять написать в css анимацию для стрелки и при нажатии чтобы она срабатывала через js (jQuery) то есть вот так:
$(function() {
    $('.strelka').hover(
        function() {
            $('.img-slider1').css('animation', 'linear 0.3s FocusStrelka');
        },
        function() {
            $('.img-slider1').css('animation', 'none');
        }
    )
})

мину такого способа в том что, нужно будет задавать id или class каждой кнопки и дублировать который я ранее писал.
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Неизвестно, что у вас в разметке, так что так:
https://jsfiddle.net/g389zhdq/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы