Эффект наведения не работает правильно в Google Chrome - PullRequest
Новая
       7

Эффект наведения не работает правильно в Google Chrome

0 голосов
/ 30 октября 2018

Я смотрел видео на Youtube о эффекте наведения, и я пытаюсь сделать это самостоятельно, но проблема в том, что он не работает в Google Chrome: :before и :after переполнение фона при выполнении перехода.

В Firefox это работает без проблем. Я думал, что это может произойти, потому что я не использовал префиксы, поэтому я включил префиксы в код, но проблема не исчезла

чтобы было понятно, моя проблема фон: до и после показа за пределами кнопки 

body {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

a {
  overflow: hidden;
  display: block;
  position: relative;
  text-decoration: none;
  color: #000;
  border: 4px solid #000;
  padding: 10px 30px;
  font-size: 20px;
  letter-spacing: 12px;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  text-transform: uppercase;
  transition:color 1s ease-in-out;
  transition-delay: 1s;
}

a:before {
  content:'';
  position: absolute;
  top: 50%;
  left: 60px;
  height: 8px;
  width: 8px;
  background-color: #F00;
  transform:scale(0.8);
  -webkit-transform:scale(0.8);
  border-radius:100%;
  -webkit-border-radius:100%;
  z-index: -1;
  opacity:0;
  transition-property:transform,left,opacity;
  transition-delay: 0s,1s,1.5s;
  transition-duration: 1s,1s,0s;
}

a:hover:before {
  border-radius:100%;
  -webkit-border-radius:100%;
  opacity:1;
  left: 10px;
  transform:scale(33);
  -webkit-transform:scale(33);
  transition-property:opacity,left,transform;
  transitiion-delay:0s,0.5s,2s;
  transition-duration: 0s,0.5s,1s;
}

a:after {
  content:'';
  position: absolute;
  top: 50%;
  right: 60px;
  height: 8px;
  width: 8px;
  background-color: #F00;
  transform:scale(0.8);
  -webkit-transform:scale(0.8);
  border-radius:100%;
  -webkit-border-radius:100%;
  z-index: -1;
  opacity:0;
  transition-property:transform,right,opacity;
  transition-delay: 0s,1s,1.5s;
  transition-duration: 1.5s,1s,0s;
}

a:hover:after {
  opacity:1;
  right: 10px;
  transform:scale(33);
  -webkit-transform:scale(33);
  transition-property:opacity,right,transform;
  transitiion-delay:0s,0.5s,2s;
  transition-duration: 0s,0.5s,1s;
}

a:hover{
  color:#FFF;
}
<a href="#">Button</a>

Ответы [ 2 ]

0 голосов
/ 30 октября 2018

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

Я попробовал ваш код в Chrome и Firefox и не заметил разницы.

Подробнее о необходимости (или отсутствии необходимости) префиксов можно узнать на этом сайте: https://caniuse.com/#search=transform

0 голосов
/ 30 октября 2018

Вы написали transitiion вместо transition несколько раз.

Кажется, ваш переход работает (даже если вы не говорите, что хотели бы сделать), он просто немного длинный.

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

body {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

a {
  overflow: hidden;
  display: block;
  position: relative;
  text-decoration: none;
  color: #000;
  border: 4px solid #000;
  padding: 10px 30px;
  font-size: 20px;
  letter-spacing: 12px;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  text-transform: uppercase;
  transition:color .2s ease-in-out;
  transition-delay: .1s;
}

a:before {
  content:'';
  position: absolute;
  top: 50%;
  left: 60px;
  height: 8px;
  width: 8px;
  background-color: #F00;
  transform:scale(0.8);
  -webkit-transform:scale(0.8);
  border-radius:100%;
  -webkit-border-radius:100%;
  z-index: -1;
  opacity:0;
  transition-property:transform,left,opacity;
  transition-delay: 0s,.5s,.5s;
  transition-duration: .5s,.5s,0s;
}

a:hover:before {
  border-radius:100%;
  -webkit-border-radius:100%;
  opacity:1;
  left: 10px;
  transform:scale(33);
  -webkit-transform:scale(33);
  transition-property:opacity,left,transform;
  transition-delay:0s,0.2s,.2s;
  transition-duration: 0s,0.2s,.2s;
}

a:after {
  content:'';
  position: absolute;
  top: 50%;
  right: 60px;
  height: 8px;
  width: 8px;
  background-color: #F00;
  transform:scale(0.8);
  -webkit-transform:scale(0.8);
  border-radius:100%;
  -webkit-border-radius:100%;
  z-index: -1;
  opacity:0;
  transition-property:transform,right,opacity;
  transition-delay: 0s,.2s,.2s;
  transition-duration: .2s,.2s,0s;
}

a:hover:after {
  opacity:1;
  right: 10px;
  transform:scale(33);
  -webkit-transform:scale(33);
  transition-property:opacity,right,transform;
  transition-delay:0s,0.2s,.2s;
  transition-duration: 0s,0.2s,.2s;
}

a:hover{
  color:#FFF;
}
<a href="#">Button</a>
...