Vue 官网灰色变彩色效果如何实现？

Question

Vue 官网

打开之后，页面向下滚动，当滚动到“中国区特别赞助商”区域时，这部分会由灰色变成彩色，请问这种效果如何实现？

Answer 1

监听滚动事件 添加active class

灰色样式：

active样式：

Answer 2

css样式控制的,没有滚动到的时候
#sponsors img {

transition: all 0.3s ease;
filter: grayscale(100%);
opacity: 0.66;

}
滚动到之后
#sponsors.active img {

filter: none;
opacity: 1;

}

Answer 3

只能说 要善于利用f12

Answer 4

要善于使用 option+command+i

Answer 5

拍脑袋一想，猜测是CSS3 transition效果实现的