Saat ini saya menghadapi masalah fading-in item nav menggunakan elemen pseudo sebelum dan sesudah.

Ketika saya mengarahkan item nav itu harus mengubah warna latar belakangnya dari putih menjadi biru. Tidak ada yang gila. Tetapi juga harus menampilkan dua gambar latar belakang, masing-masing dengan mengubah ::sebelum elemen semu dari 0 menjadi 1 dan ::setelah elemen semu dari 0 menjadi 1 juga.

Masalahnya adalah meskipun saya mengatur durasi transisi yang sama, perilaku fade elemen sedikit berbeda dibandingkan dengan transisi warna latar belakang itu sendiri.

Anda juga dapat "bermain" dengan mengarahkan kursor (jsfiddle) dengan memasukkan dan mengeluarkan mouse dengan cepat untuk melihat masalahnya dengan lebih jelas.

Jika ada yang bisa membantu saya memecahkan misteri ini, itu akan sangat dihargai :)

Ini jsfiddle saya : https://jsfiddle.net/5qnw8ke4/

Berikut adalah screenshot dari masalah transisi : tangkapan layar

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>
3
Gloubiboulga 11 Maret 2020, 14:00

1 menjawab

Jawaban Terbaik

Anda dapat menyederhanakan efek seperti di bawah ini tanpa perlu SVG dan mengandalkan satu elemen semu untuk keseluruhan bentuk:

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>

Ide lain dengan transformasi miring:

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>
0
Temani Afif 11 Maret 2020, 11:22