Все ссылки имеют время перехода вместе при загрузке страницы. Зачем? - PullRequest
Новая
       42

Все ссылки имеют время перехода вместе при загрузке страницы. Зачем?

0 голосов
/ 04 августа 2020

У меня проблема. Как вы увидите из приведенного ниже кода, я добавил время перехода к пунктам меню, поэтому, когда (на рабочем столе) я нахожу на них курсор, они плавно масштабируются. Это хорошо, но я заметил, что когда я нажимаю или касаюсь любого текста или кнопки, имеющей ссылку, переход выполняет действие со всеми тегами привязки. Когда страница загружается, каждый элемент, являющийся ссылкой, плавно «мигает».

Что я сделал не так? Должен ли я давать каждой ссылке отдельный класс и отдельно добавлять переход к каждому классу? Или как?

Кроме того, для того, чтобы вся область ссылок меню была интерактивной, мне пришлось добавить блок отображения не только в контейнер меню, но также и для каждой ссылки, как вы можете видеть в коде css (элемент меню класса) . Это нормально или я сделал что-то не так?

Большое спасибо!

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

.menu {
  width: 100vw;
  display: block;
  text-align: center;
  list-style: none;
  line-height: 59px;
  padding-top: 15px;
  background: linear-gradient(360deg, rgb(255,190,139), rgb(255,210,179));
}

.menuitem {
  display: block;
  text-decoration: none;
  font-family: 'Varela Round', sans-serif;
  color: black;
  cursor: pointer;
  font-size: 43px;
  transition: .3s;
}

.item {
  transition: 0.2s;
}


.menuitem:hover {
  color: white;
  text-shadow: 2px 2px 5px black;
}

.item:active {
  transform: scale(.8);
  color: white;
  text-shadow: 2px 2px 5px black;
}

.current {
  color: white;
  text-shadow: 2px 2px 5px black;
}
    <nav>
      <ul class="menu">
        <li class="item home"><a class="current menuitem menuitemactive" href="index.html">Home</a></li>
        <li class="item cani"><a href="cani.html" class="menuitem menuitemactive">Cani</a></li>
        <li class="item gatti"> <a href="gatti.html" class="menuitem menuitemactive">Gatti</a></li>
        <li class="item comeaiutarci"><a href="comeaiutarci.html" class="menuitem menuitemactive">Come aiutarci</a></li>
        <li class="item contatti"><a href="contatti.html" class="menuitem menuitemactive">Contatti</a></li>
      </ul>
    </nav>

1 Ответ

0 голосов
/ 06 августа 2020

Во-первых, вам необходимо понять, как работает переходы . 

div {
    transition: <property> <duration> <timing-function> <delay>;
}

В вашем примере вы переходите КАЖДЫЙ тип свойства, не указав его, поскольку свойство по умолчанию - " все". Лучше всего перенести только одно свойство, в противном случае будет перемещено каждое свойство в выбранном элементе.

Во-вторых, вы должны указать, какие селекторы (классы, идентификаторы и т. Д. c) вы будете sh для перехода, так что не все ссылки будут затронуты.

Итак, если вы хотите просто настроить таргетинг на свое меню и, например, убрать цвет или тень текста, вы должны сделать: 

.menuitem {
    transition: color 0.3s;
    transition: text-shadow 0.3s;
}

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

...