简单的网页和移动浏览器的滚动动画。
版本 {{ 3.3.6 }}
scrollreveal
-中心是围绕 css
: transition
提供了一种在更改CSS属性时控制动画速度的方法
本目录
其他
本次例子
<!-- HTML -->
<div class="foo"> Foo </div>
<div class="bar"> Bar </div>
// JavaScript
window.sr = ScrollReveal();
sr.reveal('.foo');
sr.reveal('.bar');
找正主
"main": "dist/scrollreveal.js",
input: 'src/index.js',
import Constructor from './instance/constructor'
Constructor()
export default Constructor
scrollreveal/src/instance/constructor
export default function ScrollReveal (options = {})
ok ,正主找到了
explain
scrollreveal/src/instance/constructor
代码 1- 15 引用
import defaults from './defaults'
import noop from './noop'
import clean from './methods/clean'
import destroy from './methods/destroy'
import reveal from './methods/reveal'
import sync from './methods/sync'
import delegate from './functions/delegate'
import { isMobile, transformSupported, transitionSupported } from '../utils/browser'
import { logger } from '../utils/core'
import { deepAssign, getNode } from 'tealight'
import { version } from '../../package.json'
next
代码 17-19
let _config let _debug let _instance
next
代码 21-32
export default function ScrollReveal (options = {}) {
// ------ 「
// 有没有用 new 新建这个实例
const invokedWithoutNew =
typeof this === 'undefined' || Object.getPrototypeOf(this) !== ScrollReveal.prototype
// 如果没有
if (invokedWithoutNew) {
return new ScrollReveal(options)
}
//------- 」
// 是否支持,这个后面再聊 ?
if (!ScrollReveal.isSupported()) {
logger.call(this, 'Instantiation aborted.', 'This browser is not supported.')
return noop
}
-->现在就要知道ScrollReveal.isSupported
next
代码 34-60
配置config
/**
* Here we use `buffer` to validate our configuration, before
* assigning the contents to the private variable `_config`.
*/
/*
我们使用 buffer 来 序列化我们的配置,私有变量获得
_config
*/
let buffer
{
try {
// 深度复制 第一次 _config flase
buffer = _config ? deepAssign({}, _config, options) : deepAssign({}, defaults, options)
//所以 buffer = deepAssign({}, defaults, options)
// 但是第二次时候就会使用
// buffer = deepAssign({}, _config, options)
} catch (e) {
// 失败记录
logger.call(this, 'Instantiation failed.', 'Invalid configuration.', e.message)
return noop
}
try {
// 获得节点元素
const container = getNode(buffer.container)
if (!container) {
throw new Error('Invalid container.')
}
} catch (e) {
// 失败记录
logger.call(this, 'Instantiation failed.', e.message)
return noop
}
_config = buffer //
}
// 通过 ScrollReveal.defaults
// 获得 _config
Object.defineProperty(this, 'defaults', { get: () => _config })
next
代码 62-78
检查平台信息
/**
* Now that we have our configuration, we can
* make our last check for disabled platforms.
*/
// 修葺 不能运作的平台 , 具体原因,未知
if (this.defaults.mobile === isMobile() || this.defaults.desktop === !isMobile()) {
/**
* Modify the DOM to reflect successful instantiation.
*/
document.documentElement.classList.add('sr')
if (document.body) {
document.body.style.height = '100%'
} else {
document.addEventListener('DOMContentLoaded', () => {
document.body.style.height = '100%'
})
}
}
next
代码 80-99
整顿-函数
this.store = {
containers: {},
elements: {},
history: [],
sequences: {},
}
this.pristine = true
// 整顿,记得我们要使用例子的,reveal 函数
Object.defineProperty(this, 'delegate', { get: () => delegate.bind(this) })
Object.defineProperty(this, 'destroy', { get: () => destroy.bind(this) })
Object.defineProperty(this, 'reveal', { get: () => reveal.bind(this) }) // <---
Object.defineProperty(this, 'clean', { get: () => clean.bind(this) })
Object.defineProperty(this, 'sync', { get: () => sync.bind(this) })
Object.defineProperty(this, 'version', { get: () => version })
Object.defineProperty(this, 'noop', { get: () => false })
// 返回本身
return _instance ? _instance : (_instance = this)
}
next
我们需要进入 reveal 函数
import reveal from './methods/reveal'
/**
* Static members are available immediately during instantiation,
* so debugging and browser support details are handled here.
*/
ScrollReveal.isSupported = () => transformSupported() && transitionSupported()
import { isMobile, transformSupported, transitionSupported } from '../utils/browser'
- transformSupported
scrollreveal/src/util/browser.js
export function transformSupported () {
const style = document.documentElement.style
return 'transform' in style || 'WebkitTransform' in style
}
- transitionSupported
export function transitionSupported () {
const style = document.documentElement.style
return 'transition' in style || 'WebkitTransition' in style
}
先验证函数
- isMobile
import { isMobile, transformSupported, transitionSupported } from '../utils/browser'
scrollreveal/src/util/browser.js
export function isMobile (agent = navigator.userAgent) {
return /Android|iPhone|iPad|iPod/i.test(agent)
}
Object.defineProperty(ScrollReveal, 'debug', {
get: () => _debug || false,
set: value => {
if (typeof value === 'boolean') _debug = value
},
})
在 代码中如此使用
logger.call(this, 'Instantiation aborted.', 'This browser is not supported.')
export function logger (message, ...details) {
if (this.constructor.debug && console) {
let report = `%cScrollReveal: ${message}`
details.forEach(detail => (report += `\n — ${detail}`))
console.log(report, 'color: #ea654b;') // eslint-disable-line no-console
}
}
export default {
clean () {},
destroy () {},
reveal () {},
sync () {},
get noop () {
return true
},
}
scrollreveal
通过 - 传递变量
// 实例化
new function scrollreveal(){
this.store // 可以看成全局变量
Object.defineProperty(this, 'delegate', { get: () => delegate.bind(this) }) // 传递全局变量
}