zepto源码之fx.js

最新推荐文章于 2025-01-17 10:37:43 发布

原创

最新推荐文章于 2025-01-17 10:37:43 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#源码

本文详细探讨了zepto库中fx模块的源码，包括如何添加CSS过渡和动画的前缀，理解transitionEnd和animationEnd事件的处理，以及在执行过程中如何处理页面回流以确保动画效果的正常运行。文章深入分析了不同浏览器环境下事件监听的兼容性和特殊情况处理策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

zepto的fx模块，封装了CSS的过渡和动画。

二、源码

    //fx The animate()方法
    (function ($, undefined) {
   
   
        //prefix:样式前缀(-webkit-、-moz-、-o-)；eventPrefix事件前缀(webkit、''、o)
        var prefix = '', eventPrefix,
            //内核厂商
            vendors = {Webkit: 'webkit', Moz: '', O: 'o'},
            testEl = document.createElement('div'),
            //支持的过渡、动画效果
            supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,
            transform,
            //过渡
            transitionProperty, transitionDuration, transitionTiming, transitionDelay,
            //动画
            animationName, animationDuration, animationTiming, animationDelay,
            cssReset = {};

        //将字符串转成css属性，如aB-->a-b
        function dasherize(str) {
   
   
            return str.replace(/([A-Z])/g, '-$1').toLowerCase()
        }

        //修正事件名(如果不支持css3标准语法，则为事件添加前缀)
        function normalizeEvent(name) {
   
   
            return eventPrefix ? eventPrefix + name : name.toLowerCase()
        }

        //如果不支持css3标准，那么为样式加上内核厂商前缀
        if (testEl.style.transform === undefined) $.each(vendors, function (vendor, event) {
   
   
            if (testEl.style[vendor + 'TransitionProperty'] !== undefined) {
                prefix = '-' + vendor.toLowerCase() + '-';
                eventPrefix = event;
                return false
            }
        });

        //将transform设置为兼容性写法
        transform = prefix + 'transform';
        cssReset[transitionProperty = prefix + 'transition-property'] =
            cssReset[transitionDuration = prefix + 'transition-duration']