Vue制作固定定位图标滑动隐藏效果

写在前面
移动端页面,有时候会出现一些固定定位在底部图标,比如购物车等。这时候如果添加一个滑动页面,图标透明度变低,同时 移动到屏幕边进行隐藏,效果如下。

滑动前后效果对比

所用原理

监听滑动事件,每次进行滑动时,触发动画,添加定时器,1.4s后显示该图标。具体代码如下:






引入代码如下:








github代码

你可能感兴趣的:(Vue制作固定定位图标滑动隐藏效果)