Framework7 中mo.js效果不显示的原因及解决办法

近日想在自己的项目中给一些按钮增加一些点击特效,以提升用户体验,使用mo.js;
根据官方文档 http://mojs.io/ 调试出来自己想要的特效,加入到项目中去点击无效果,控制台也没报错。
源码如下:

<script src="https://cdn.jsdelivr.net/mojs/0.265.6/mo.min.js"></script>


<script type="text/javascript">
    const burstEverywhere = new mojs.Burst({
        left: 0, top: 0,
        radius:   { 4: 19 },
        angle:    45,
        children: {
            shape:        'line',
            radius:       3,
            scale:        1,
            stroke:       '#FD7932',
            strokeDasharray: '100%',
            strokeDashoffset: { '-100%' : '100%' },
            duration:     700,
            easing:       'quad.out',
        }
    });
    document.addEventListener('click', function (e) {
        burstEverywhere.tune({x: e.pageX, y: e.pageY}).setSpeed(3).replay();
    });
</script>

在空白html中会有点击特效。

一开始怎么都没想出原因来,后来在用PS作图的时候突然想起来,Framework7创建的view会不会把显示出点击效果遮在下边了,赶紧测试!

设置z-index如下:

burstEverywhere.el.style.zIndex = 999999;

搞定。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容