Ищете более эффективный способ создания этого скрытого переполнения и анимации перевода текста

Недавно я пытался создать эффект анимации, где я использую переполнение, скрытое в родительском диапазоне, а затем преобразую его в представление. Мой текущий код кажется немного сложным, и мне интересно, есть ли какой-либо другой способ обойти это, учитывая эффект, который я собираюсь использовать на веб-сайте.

    $(".in1").addClass("error").delay(125).queue(function(next){
        $(this).addClass('in1-active');
    });
    $(".in2").addClass("error").delay(250).queue(function(next){
        $(this).addClass('in2-active');
    });
    $(".in3").addClass("error").delay(375).queue(function(next){
        $(this).addClass('in3-active');
    });

.inwrap {
    overflow: hidden;
    display: block;
    -webkit-font-smoothing: antialiased;
}
.in1, .in2, .in3{
    display: block;
    transition: transform 1s cubic-bezier(0,1,.82,1);
    transform: translateY(101%);
}
.in1-active, .in2-active , .in3-active  {
    display: block;
    transform: translateY(0px);
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "introduction">
  <h2>
    <span class = "inwrap"><span class = "in1"><a href = "#about-me">Graphic designer</a> that </span></span>
    <span class = "inwrap"><span class = "in2">specializes in <a href = "#days-of-ux">interactive</a></span></span>
    <span class = "inwrap"><span class = "in3"> design and <a href = "#struggle-magazine">print</a></span></span>
  </h2>
</div>

javascript jquery html css

23.01.2019 04:14

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 2

Нет необходимости обрабатывать отдельный клик. Вы можете использовать подстановочный знак и обрабатывать все клики по одному.

$('[class^=in]').addClass("error").delay(125).queue(function(next) {
  var cls = $(this).attr('class');
  cls = cls + "-active";
  $(this).addClass(cls);
});

.inwrap {
    overflow: hidden;
    display: block;
    -webkit-font-smoothing: antialiased;
}
.in {
    display: block;
    transition: transform 1s cubic-bezier(0,1,.82,1);
    transform: translateY(101%);
}
.in-active{
    display: block;
    transform: translateY(0px);
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "introduction">
  <h2>
    <span class = "inwrap"><span class = "in1"><a href = "#about-me">Graphic designer</a> that </span></span>
    <span class = "inwrap"><span class = "in2">specializes in <a href = "#days-of-ux">interactive</a></span></span>
    <span class = "inwrap"><span class = "in3"> design and <a href = "#struggle-magazine">print</a></span></span>
  </h2>
</div>

Фрагмент кода не работает. Что-то мне здесь не хватает?

— 23.01.2019 14:46

23.01.2019 04:22

Вместо этого нашел способ использовать setTimeout.

    $('.in').each(function(i){
        var row = $(this);
      setTimeout(function() {
              row.addClass('in-active');
          }, 150*i);

    });

.inwrap {
    overflow: hidden;
    display: block;
    -webkit-font-smoothing: antialiased;
}
.in {
    display: block;
    transition: transform 1s cubic-bezier(0,1,.82,1);
    transform: translateY(101%);
}
.in-active{
    display: block;
    transform: translateY(0px);
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "introduction">
  <h2>
    <span class = "inwrap"><span class = "in"><a href = "#about-me">Graphic designer</a> that </span></span>
    <span class = "inwrap"><span class = "in">specializes in <a href = "#days-of-ux">interactive</a></span></span>
    <span class = "inwrap"><span class = "in"> design and <a href = "#struggle-magazine">print</a></span></span>
  </h2>
</div>

23.01.2019 15:40

Другие вопросы по теме

Подменю навигационных ссылок не остаются при наведении

Изменить параметры выбора на основе другого выбранного параметра выбора

Хранение JSX на сервере, получение его через API и рендеринг с помощью работающей функции onClick

Javascript ".attr" не работает с ie11 и вопросами оптимизации

Есть ли способ сохранить дополнительный атрибут в DropDownList, заполненном с помощью AJAX, кроме значения/текста?

Можно ли фильтровать уже полученные данные с помощью jQuery

Сводка объекта JSON с помощью JQuery

JQuery — оператор If для Eform

Второй вызов Ajax возвращает 500 Internal Server Error

Как обновить область просмотра после удаления данных из облачного интерфейса Firestore без обновления страницы

Ищете более эффективный способ создания этого скрытого переполнения и анимации перевода текста

Ответы 2

Другие вопросы по теме

Похожие вопросы