анимировать теги li при нажатии в css

Question

анимировать теги li при нажатии в css

Если вы используете angularJS или какой-то вариант библиотеки обещаний Q, то у вас есть метод .all(), который решает эту точную проблему.

var savePromises = [];
angular.forEach(models, function(model){
  savePromises.push(
    model.saveToServer()
  )
});

$q.all(savePromises).then(
  function success(results){...},
  function failed(results){...}
);

см. полный API:

https://github.com/kriskowal/q/wiki/API-Reference#promiseall

https://docs.angularjs.org/ апи / нг / услуги / $ д

-1

css3 css

задан dgknca 15 January 2019 в 23:11

1 ответ

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

css3 css

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

score 0 · Answer 1

Проблема заключается в CSS-специфичности .
Селектор этого правила

#menu #sm-menu:checked~.menu2 li {
  animation: menu 1.5s;
  animation-fill-mode: forwards;
}

на сильнее , чем этот

#menu .menu2 ul li:nth-child(2) {
  animation-delay: .3s;
}

, поэтому он переопределяет его и использует свойство сокращения animation переопределяет animation-delay в следующих правилах.

У вас есть два решения:
- Лучшее: сделайте приведенные ниже правила более строгими, как это (улучшенная версия вашего CSS):

#sm-menu:checked~.menu2 li {
  animation: menu 1.5s;
  animation-fill-mode: forwards;
}

@keyframes menu {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(300px);
  }
}

#menu .menu2 li:nth-child(2) {
  animation-delay: .3s;
}

#menu .menu2 ul li:nth-child(3) {
  animation-delay: .6s;
}

#menu .menu2 ul li:nth-child(4) {
  animation-delay: .9s;
}

#menu .menu2 ul li:nth-child(5) {
  animation-delay: 1.2s;
}

Вторым грубым является использование правила !important, которое является исключением, которое переопределяет любой другой селектор, подобный этому.

Примечание: всегда лучше использовать как можно более краткие селекторы.