Изменение цвета фона и до / после перехода непрозрачности syn c проблема - PullRequest
Новая
       72

Изменение цвета фона и до / после перехода непрозрачности syn c проблема

3 голосов
/ 11 марта 2020

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

При наведении курсора на элемент навигации он должен изменить цвет фона с белого на синий. Ничего сумасшедшего. Но он также должен отображать два фоновых изображения, соответственно изменяя псевдоэлемент :: before с 0 на 1 и псевдоэлемент :: after с 0 на 1.

Проблема в том, что хотя я установил при той же продолжительности перехода поведение затухания элемента немного отличается по сравнению с переходом цвета фона на самом.

Вы также можете «поиграть» с наведением курсора (jsfiddle), наведя мышку на и быстро, чтобы увидеть проблему более четко.

Если бы кто-нибудь мог помочь мне решить эту тайну, это было бы очень высоко оценено:)

Вот мой jsfiddle: https://jsfiddle.net/5qnw8ke4/

Вот скриншот проблемы перехода: снимок экрана 

a {
    display: block;
    width: 61px;
    height: 67px;
    margin: 50px;
    background-color: #fff;
    text-align: center;
    font-family: "Roboto", sans-serif;
    text-decoration: none;
    line-height: 67px;
    color: #259cff;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
}

a::before, a::after {
    opacity: 0;
    height: 100%;
    position: absolute;
    top: 0;
    content: "";
    -webkit-transition: opacity 0.3s,width 0.3s,left 0.3s,right 0.3s;
    transition: opacity 0.3s,width 0.3s,left 0.3s,right 0.3s;
}

a::before {
    width: 12px;
    left: -12px;
    background: url("https://svgshare.com/i/J61.svg") no-repeat 0;
    background-size: auto 100%;
}

a::after {
    width: 12px;
    right: -12px;
    background: url("https://svgshare.com/i/J4j.svg") no-repeat 100%;
    background-size: auto 100%;
}

a:hover {
    background-color: #259cff;
    color: #fff;
}

a:hover::before, a:hover::after {
    opacity: 1;
    width: 17px;
}

a:hover::before {
    left: -17px;
}

a:hover::after {
    right: -17px;
}
<a href="#">My link</a>

1 Ответ

0 голосов
/ 11 марта 2020

Вы можете упростить эффект, как показано ниже, без необходимости использования SVG и использования одного псевдоэлемента для всей фигуры: 

a {
    display: block;
    width: 61px;
    height: 67px;
    margin: 50px;
    text-align: center;
    font-family: "Roboto", sans-serif;
    text-decoration: none;
    line-height: 67px;
    color: #259cff;
    position: relative;
    transition:0.2s;
}

a::before {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   bottom:0;
   left:0;
   right:0; 
   opacity:0;
   padding:0 15px;
   background:
    linear-gradient(#259cff,#259cff) content-box,
    linear-gradient(to top    right,transparent 47%,#259cff 50%) left /15px 100%,
    linear-gradient(to bottom right,transparent 47%,#d4ecff 50%) left /15px 100%,
    linear-gradient(to bottom left ,transparent 47%,#259cff 50%) right/15px 100%,
    linear-gradient(to top    left ,transparent 47%,#d4ecff 50%) right/15px 100%;
   background-repeat:no-repeat;
   transition:inherit;
}
a:hover::before {
  left:-17px;
  right:-17px;
  opacity:1;
}
a:hover {
  color:#fff;
}
<a href="#">My link</a>

другая идея с перекосом: 

a {
  display: block;
  width: 61px;
  height: 67px;
  margin: 50px;
  text-align: center;
  font-family: "Roboto", sans-serif;
  text-decoration: none;
  line-height: 67px;
  color: #259cff;
  position: relative;
  transition: 0.2s;
}

a::before,
a::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  background: #d4ecff;
  transform: skewX(-12deg);
  transition: inherit;
}

a::after {
  background: #259cff;
  transform: skewX(12deg);
}

a:hover::before,
a:hover::after {
  left: -17px;
  right: -17px;
  opacity: 1;
}

a:hover {
  color: #fff;
}
<a href="#">My link</a>
...