3

Каким способом возможно реализовать анимацию приложенную ниже на JavaScript?

введите сюда описание изображения

<div class="lang-wrap">
                            <div class="lang">
                                <button class="lang__btn" data-toggle="dropdown">Eng</button>
                                <div class="lang__body">
                                    <a href="" class="lang__item">Rus</a>
                                    <a href=""class="lang__item">Eng</a>
                                </div>
                            </div>
                        </div>
                    </div>
4
  • Можно, допустим, наложить две картинки друг на друга и уменьшать ширину верхней. Блоку с картинкой задать overflow: hidden
    – Daniel
    28 июл 2019 в 11:45
  • есть такой скрипт after/before вот как раз он там поможет 28 июл 2019 в 13:31
  • @MaximLensky Можно немного подробнее? 28 июл 2019 в 16:54
  • 1
    codepen.io/topicstarter/pen/dBEYwY смотри - принцип один и тот же 28 июл 2019 в 17:04

1 ответ 1

8

Вот css вариант

#lang {
  display: none;
}
#lang:checked ~ .rus,   
#lang:not(:checked) ~ .eng {
  width: 0px;
}
label[for="lang"] {
  display: inline-block;
  width: 84px;
  height: 42px;
  line-height: 42px;
  overflow: hidden;
  transition: 0.4s;
  font-size: 40px;
  font-family: arial;
  cursor: pointer;
  user-select: none;
}
.eng {
  direction: rtl;
  border-left: solid red;
}
<input id="lang" type='checkbox'>
<label for="lang" class="rus">RUS</label><label for="lang" class="eng">ENG</label>

2
  • Еще появился вопрос, а как сделать чтобы линия появлялась сначала не справа а слева(методом тыка не разобрался что за это отвечает). 6 авг 2019 в 12:22
  • 2
    @ДмитрийНиколаевич #lang:checked ~ .eng, #lang:not(:checked) ~ .rus 6 авг 2019 в 12:23

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.