【踩坑】按钮闪阿闪，gradient 在 hover 时闪烁

某天在闲逛网站，美其名观察各种生态，实则打混摸鱼的时候
发现按钮在 hover 过渡时出现闪烁的状况
(在一瞬间可以看到背景颜色)

经过研究之後发现是「渐层切换到纯色」之间才会产生的状况

虽然这样一闪一闪的好像颇带感的...但猫毛的就是觉得眼睛好痛啊 ‵｡ﾟヽ(ﾟ´Д‵)ﾉﾟ｡

研究之後发现是 transition 所造成的过渡闪烁

如果没有需要动画过度效果的话直接拿掉trasition 就不会闪呀闪了，但如果需要的话就会很奇怪...
看起来就是丑阿!丑!!

.s-btn-1{ 
  background: linear-gradient(to left, #8a2387, #e94057, #f27121);
/*   transition: .5s; */
}
.s-btn-1:hover{  
  background: linear-gradient(to left, #8a2387, #8a2387, #8a2387);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  transform:translateY(-10%);
}

假如说要有要缓缓上升的感觉，该怎麽办呢...?(›´ω`‹ )

只好土法炼钢了!!!

解：纯色改成伪渐层... (́◉◞౪◟◉‵)

嘿嘿，这样看起来就好多了呢~

.s-btn-2{ 
  background: linear-gradient(to left, #3494e6, #3494e6); 
  transition: .5s;
}
.s-btn-2:hover{  
     background: linear-gradient(to left, #3494e6, #ec6ead); 
     box-shadow: 0 2px 10px rgba(0,0,0,0.5);
     transform:translateY(-10%);
}

(巴头)

老实说，不懂transition之前的我的确是这样解决的...(遮脸)

懂了transition之後就知道只需要加入

transition: background-image .5s, transform .5s;

就可以解决这个问题啦!

欢迎到codepen这边感受一下transition的奥妙~
https://codepen.io/SealSeal/pen/PomQZbo