Масштаб JQuery при нажатии addClass

Я пытаюсь по щелчку переключить .post__input--not-set в scale. Пытался добавить преобразование CSS, но безуспешно.

$(".post__input--not-set").hide();
$('.btn-class').click(function() {
  $(this).toggleClass("new");
  $(this).find('i').toggleClass('fa-check fa-pencil-alt');
  $(".post__input--not-set").addClass('animate').toggle();
});

.btn-class {
  color: white;
  padding: 30px;
  background: blue;
}

.new {
  background-color: green
}

.post__input--not-set {
  transform: scale(0);
  transition: all 5s;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: red
}

.post__input--not-set.animate {
  transform: scale(1);
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href = "https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel = "stylesheet" />
<a class = "btn-class"><i class = "fa fa-pencil-alt"></i></a>
<div class = "post__input--not-set"></div>
<div class = "post__input--not-set"></div>
<div class = "post__input--not-set"></div>

javascript jquery css

02.05.2018 06:32

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

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

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

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

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

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

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

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

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

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

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

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

217

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы можете удалить $(".post__input--not-set").hide() из своего js и переключить только transform. Это работает для вас?

$('.btn-class').click(function() {
  $(this).toggleClass("new");
  $(this).find('i').toggleClass('fa-check fa-pencil-alt');
  $(".post__input--not-set").toggleClass('animate');
});

.btn-class {
  color: white;
  padding: 30px;
  background: blue;
}

.new {
  background-color: green
}

.post__input--not-set {
  transform: scale(0);
  transition: transform 5s;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: red
}

.post__input--not-set.animate {
  transform: scale(1);
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href = "https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel = "stylesheet" />
<a class = "btn-class"><i class = "fa fa-pencil-alt"></i></a>
<div class = "post__input--not-set"></div>
<div class = "post__input--not-set"></div>
<div class = "post__input--not-set"></div>

02.05.2018 06:48

Переходы не работают, если элемент изначально отсутствует. Стиль display: none фактически удаляет элементы. Итак, когда вы переключаете свойство display, они уже воссоздаются с классом animate, и нет ничего изменение для анимации.

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

Правильные способы были бы

чтобы элементы всегда отображались (используя visibility или opacity, чтобы скрыть их), но это не всегда возможно, потому что они будут там занимает место и принимает события,
использовать JS для создания новых элементов перед каждым переходом и их уничтожения после,
или использовать JS для создания всей анимации.

02.05.2018 06:49

Интересное обсуждение: CSS3 переход по клику с использованием чистого CSS

Возможное решение:

   $(".post__input--not-set").hide();
$('.btn-class').click(function() {
  $(this).toggleClass("new");
  $(this).find('i').toggleClass('fa-check fa-pencil-alt');
  $(".post__input--not-set").addClass('animate').toggle();
  if ($(".post__input--not-set").css("transform") == 'none') {
    $(".post__input--not-set").css("transform", "scale(0)");
  } else {
    $(".post__input--not-set").css("transform", "scale(1)");
  }

});

    .btn-class {
  color: white;
  padding: 30px;
  background: blue;
}

.new {
  background-color: green
}

.post__input--not-set {
  transform: scale(0);
  transition: transform 5s;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: red
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href = "https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel = "stylesheet" />
<a class = "btn-class"><i class = "fa fa-pencil-alt"></i></a>
<div class = "post__input--not-set"></div>
<div class = "post__input--not-set"></div>
<div class = "post__input--not-set"></div>

02.05.2018 07:32

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

Как добавить параметр в выбор и предотвратить исчезновение раскрывающегося списка при событии щелчка тега выбора

Ширина дней в стиле jQuery datepicker и добавление нескольких элементов

Хотите получить номер страницы с помощью функции Datatable jQuery, но она генерирует Typeerror

Элемент HTML Absolute onclick возвращается в начало страницы

Вызов Ajax $ _POST для PHP $ _SESSION возвращает устаревшую информацию

Показать div при наведении курсора на изображение JQuery

Динамическое добавление / создание Selectpicker при нажатии кнопки

Уведомление по времени jQuery onclick

Document.getElementByClassName не работает, но document.getElementById работает

Проблема форматирования раскрывающегося списка JQuery Mobile

Масштаб JQuery при нажатии addClass

Ответы 3

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

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