mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-11-29 10:38:56 +08:00
chore: remove css-animation (#7613)
* chore: remove css-animate * chore(site): remove localStorage support check
This commit is contained in:
parent
33a0708eb4
commit
f42d8ad1ce
@ -1,130 +0,0 @@
|
||||
const START_EVENT_NAME_MAP = {
|
||||
transitionstart: {
|
||||
transition: 'transitionstart',
|
||||
WebkitTransition: 'webkitTransitionStart',
|
||||
MozTransition: 'mozTransitionStart',
|
||||
OTransition: 'oTransitionStart',
|
||||
msTransition: 'MSTransitionStart',
|
||||
},
|
||||
|
||||
animationstart: {
|
||||
animation: 'animationstart',
|
||||
WebkitAnimation: 'webkitAnimationStart',
|
||||
MozAnimation: 'mozAnimationStart',
|
||||
OAnimation: 'oAnimationStart',
|
||||
msAnimation: 'MSAnimationStart',
|
||||
},
|
||||
};
|
||||
|
||||
const END_EVENT_NAME_MAP = {
|
||||
transitionend: {
|
||||
transition: 'transitionend',
|
||||
WebkitTransition: 'webkitTransitionEnd',
|
||||
MozTransition: 'mozTransitionEnd',
|
||||
OTransition: 'oTransitionEnd',
|
||||
msTransition: 'MSTransitionEnd',
|
||||
},
|
||||
|
||||
animationend: {
|
||||
animation: 'animationend',
|
||||
WebkitAnimation: 'webkitAnimationEnd',
|
||||
MozAnimation: 'mozAnimationEnd',
|
||||
OAnimation: 'oAnimationEnd',
|
||||
msAnimation: 'MSAnimationEnd',
|
||||
},
|
||||
};
|
||||
|
||||
const startEvents = [];
|
||||
const endEvents = [];
|
||||
|
||||
function detectEvents() {
|
||||
const testEl = document.createElement('div');
|
||||
const style = testEl.style;
|
||||
|
||||
if (!('AnimationEvent' in window)) {
|
||||
delete START_EVENT_NAME_MAP.animationstart.animation;
|
||||
delete END_EVENT_NAME_MAP.animationend.animation;
|
||||
}
|
||||
|
||||
if (!('TransitionEvent' in window)) {
|
||||
delete START_EVENT_NAME_MAP.transitionstart.transition;
|
||||
delete END_EVENT_NAME_MAP.transitionend.transition;
|
||||
}
|
||||
|
||||
function process(EVENT_NAME_MAP, events) {
|
||||
for (const baseEventName in EVENT_NAME_MAP) {
|
||||
if (EVENT_NAME_MAP.hasOwnProperty(baseEventName)) {
|
||||
const baseEvents = EVENT_NAME_MAP[baseEventName];
|
||||
for (const styleName in baseEvents) {
|
||||
if (styleName in style) {
|
||||
events.push(baseEvents[styleName]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
process(START_EVENT_NAME_MAP, startEvents);
|
||||
process(END_EVENT_NAME_MAP, endEvents);
|
||||
}
|
||||
|
||||
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
|
||||
detectEvents();
|
||||
}
|
||||
|
||||
function addEventListener(node, eventName, eventListener) {
|
||||
node.addEventListener(eventName, eventListener, false);
|
||||
}
|
||||
|
||||
function removeEventListener(node, eventName, eventListener) {
|
||||
node.removeEventListener(eventName, eventListener, false);
|
||||
}
|
||||
|
||||
const TransitionEvents = {
|
||||
// Start events
|
||||
startEvents,
|
||||
|
||||
addStartEventListener(node, eventListener) {
|
||||
if (startEvents.length === 0) {
|
||||
setTimeout(eventListener, 0);
|
||||
return;
|
||||
}
|
||||
startEvents.forEach(startEvent => {
|
||||
addEventListener(node, startEvent, eventListener);
|
||||
});
|
||||
},
|
||||
|
||||
removeStartEventListener(node, eventListener) {
|
||||
if (startEvents.length === 0) {
|
||||
return;
|
||||
}
|
||||
startEvents.forEach(startEvent => {
|
||||
removeEventListener(node, startEvent, eventListener);
|
||||
});
|
||||
},
|
||||
|
||||
// End events
|
||||
endEvents,
|
||||
|
||||
addEndEventListener(node, eventListener) {
|
||||
if (endEvents.length === 0) {
|
||||
setTimeout(eventListener, 0);
|
||||
return;
|
||||
}
|
||||
endEvents.forEach(endEvent => {
|
||||
addEventListener(node, endEvent, eventListener);
|
||||
});
|
||||
},
|
||||
|
||||
removeEndEventListener(node, eventListener) {
|
||||
if (endEvents.length === 0) {
|
||||
return;
|
||||
}
|
||||
endEvents.forEach(endEvent => {
|
||||
removeEventListener(node, endEvent, eventListener);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default TransitionEvents;
|
@ -1,186 +0,0 @@
|
||||
// https://github.com/yiminghe/css-animation 1.5.0
|
||||
|
||||
import Event from './Event';
|
||||
import classes from '../component-classes';
|
||||
import { requestAnimationTimeout, cancelAnimationTimeout } from '../requestAnimationTimeout';
|
||||
import { inBrowser } from '../env';
|
||||
|
||||
const isCssAnimationSupported = Event.endEvents.length !== 0;
|
||||
const capitalPrefixes = [
|
||||
'Webkit',
|
||||
'Moz',
|
||||
'O',
|
||||
// ms is special .... !
|
||||
'ms',
|
||||
];
|
||||
const prefixes = ['-webkit-', '-moz-', '-o-', 'ms-', ''];
|
||||
|
||||
function getStyleProperty(node, name) {
|
||||
if (inBrowser) return '';
|
||||
// old ff need null, https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
|
||||
const style = window.getComputedStyle(node, null);
|
||||
let ret = '';
|
||||
for (let i = 0; i < prefixes.length; i++) {
|
||||
ret = style.getPropertyValue(prefixes[i] + name);
|
||||
if (ret) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
function fixBrowserByTimeout(node) {
|
||||
if (isCssAnimationSupported) {
|
||||
const transitionDelay = parseFloat(getStyleProperty(node, 'transition-delay')) || 0;
|
||||
const transitionDuration = parseFloat(getStyleProperty(node, 'transition-duration')) || 0;
|
||||
const animationDelay = parseFloat(getStyleProperty(node, 'animation-delay')) || 0;
|
||||
const animationDuration = parseFloat(getStyleProperty(node, 'animation-duration')) || 0;
|
||||
const time = Math.max(transitionDuration + transitionDelay, animationDuration + animationDelay);
|
||||
// sometimes, browser bug
|
||||
node.rcEndAnimTimeout = setTimeout(() => {
|
||||
node.rcEndAnimTimeout = null;
|
||||
if (node.rcEndListener) {
|
||||
node.rcEndListener();
|
||||
}
|
||||
}, time * 1000 + 200);
|
||||
}
|
||||
}
|
||||
|
||||
function clearBrowserBugTimeout(node) {
|
||||
if (node.rcEndAnimTimeout) {
|
||||
clearTimeout(node.rcEndAnimTimeout);
|
||||
node.rcEndAnimTimeout = null;
|
||||
}
|
||||
}
|
||||
|
||||
const cssAnimation = (node, transitionName, endCallback) => {
|
||||
const nameIsObj = typeof transitionName === 'object';
|
||||
const className = nameIsObj ? transitionName.name : transitionName;
|
||||
const activeClassName = nameIsObj ? transitionName.active : `${transitionName}-active`;
|
||||
let end = endCallback;
|
||||
let start;
|
||||
let active;
|
||||
const nodeClasses = classes(node);
|
||||
|
||||
if (endCallback && Object.prototype.toString.call(endCallback) === '[object Object]') {
|
||||
end = endCallback.end;
|
||||
start = endCallback.start;
|
||||
active = endCallback.active;
|
||||
}
|
||||
|
||||
if (node.rcEndListener) {
|
||||
node.rcEndListener();
|
||||
}
|
||||
|
||||
node.rcEndListener = e => {
|
||||
if (e && e.target !== node) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (node.rcAnimTimeout) {
|
||||
cancelAnimationTimeout(node.rcAnimTimeout);
|
||||
node.rcAnimTimeout = null;
|
||||
}
|
||||
|
||||
clearBrowserBugTimeout(node);
|
||||
|
||||
nodeClasses.remove(className);
|
||||
nodeClasses.remove(activeClassName);
|
||||
|
||||
Event.removeEndEventListener(node, node.rcEndListener);
|
||||
node.rcEndListener = null;
|
||||
|
||||
// Usually this optional end is used for informing an owner of
|
||||
// a leave animation and telling it to remove the child.
|
||||
if (end) {
|
||||
end();
|
||||
}
|
||||
};
|
||||
|
||||
Event.addEndEventListener(node, node.rcEndListener);
|
||||
|
||||
if (start) {
|
||||
start();
|
||||
}
|
||||
nodeClasses.add(className);
|
||||
|
||||
node.rcAnimTimeout = requestAnimationTimeout(() => {
|
||||
node.rcAnimTimeout = null;
|
||||
|
||||
nodeClasses.add(className);
|
||||
nodeClasses.add(activeClassName);
|
||||
|
||||
if (active) {
|
||||
requestAnimationTimeout(active, 0);
|
||||
}
|
||||
fixBrowserByTimeout(node);
|
||||
// 30ms for firefox
|
||||
}, 30);
|
||||
|
||||
return {
|
||||
stop() {
|
||||
if (node.rcEndListener) {
|
||||
node.rcEndListener();
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
cssAnimation.style = (node, style, callback) => {
|
||||
if (node.rcEndListener) {
|
||||
node.rcEndListener();
|
||||
}
|
||||
|
||||
node.rcEndListener = e => {
|
||||
if (e && e.target !== node) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (node.rcAnimTimeout) {
|
||||
cancelAnimationTimeout(node.rcAnimTimeout);
|
||||
node.rcAnimTimeout = null;
|
||||
}
|
||||
|
||||
clearBrowserBugTimeout(node);
|
||||
|
||||
Event.removeEndEventListener(node, node.rcEndListener);
|
||||
node.rcEndListener = null;
|
||||
|
||||
// Usually this optional callback is used for informing an owner of
|
||||
// a leave animation and telling it to remove the child.
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
Event.addEndEventListener(node, node.rcEndListener);
|
||||
|
||||
node.rcAnimTimeout = requestAnimationTimeout(() => {
|
||||
for (const s in style) {
|
||||
if (style.hasOwnProperty(s)) {
|
||||
node.style[s] = style[s];
|
||||
}
|
||||
}
|
||||
node.rcAnimTimeout = null;
|
||||
fixBrowserByTimeout(node);
|
||||
}, 0);
|
||||
};
|
||||
|
||||
cssAnimation.setTransition = (node, p, value) => {
|
||||
let property = p;
|
||||
let v = value;
|
||||
if (value === undefined) {
|
||||
v = property;
|
||||
property = '';
|
||||
}
|
||||
property = property || '';
|
||||
capitalPrefixes.forEach(prefix => {
|
||||
node.style[`${prefix}Transition${property}`] = v;
|
||||
});
|
||||
};
|
||||
|
||||
cssAnimation.isCssAnimationSupported = isCssAnimationSupported;
|
||||
|
||||
export { isCssAnimationSupported };
|
||||
|
||||
export default cssAnimation;
|
@ -1,24 +0,0 @@
|
||||
let animation;
|
||||
|
||||
function isCssAnimationSupported() {
|
||||
if (animation !== undefined) {
|
||||
return animation;
|
||||
}
|
||||
const domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');
|
||||
const elm = document.createElement('div');
|
||||
if (elm.style.animationName !== undefined) {
|
||||
animation = true;
|
||||
}
|
||||
if (animation !== undefined) {
|
||||
for (let i = 0; i < domPrefixes.length; i++) {
|
||||
if (elm.style[`${domPrefixes[i]}AnimationName`] !== undefined) {
|
||||
animation = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
animation = animation || false;
|
||||
return animation;
|
||||
}
|
||||
|
||||
export default isCssAnimationSupported;
|
@ -1,4 +1,4 @@
|
||||
import type { App, Plugin, WatchStopHandle } from 'vue';
|
||||
import type { App, MaybeRef, Plugin, WatchStopHandle } from 'vue';
|
||||
import { watch, computed, reactive, defineComponent, watchEffect } from 'vue';
|
||||
import defaultRenderEmpty from './renderEmpty';
|
||||
import type { RenderEmptyHandler } from './renderEmpty';
|
||||
@ -7,7 +7,6 @@ import LocaleProvider, { ANT_MARK } from '../locale-provider';
|
||||
|
||||
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
|
||||
import type { MaybeRef } from '../_util/type';
|
||||
import message from '../message';
|
||||
import notification from '../notification';
|
||||
import { registerTheme } from './cssVariables';
|
||||
|
@ -37,7 +37,7 @@ import More from './More.vue';
|
||||
import Navigation from './Navigation.vue';
|
||||
import Ecosystem from './Ecosystem.vue';
|
||||
import { version } from 'ant-design-vue';
|
||||
import { isZhCN, isLocalStorageNameSupported, getLocalizedPathname } from '../../utils/util';
|
||||
import { isZhCN, getLocalizedPathname } from '../../utils/util';
|
||||
import { useRoute } from 'vue-router';
|
||||
export default defineComponent({
|
||||
name: 'HeaderMenu',
|
||||
@ -58,9 +58,7 @@ export default defineComponent({
|
||||
const currentProtocol = `${window.location.protocol}//`;
|
||||
const currentHref = window.location.href.substring(currentProtocol.length);
|
||||
|
||||
if (isLocalStorageNameSupported()) {
|
||||
localStorage.setItem('locale', isZhCN(pathname) ? 'en-US' : 'zh-CN');
|
||||
}
|
||||
localStorage.setItem('locale', isZhCN(pathname) ? 'en-US' : 'zh-CN');
|
||||
|
||||
window.location.href =
|
||||
currentProtocol +
|
||||
|
@ -1,33 +0,0 @@
|
||||
export function isZhCN(name) {
|
||||
return /-cn\/?$/.test(name);
|
||||
}
|
||||
export function isLocalStorageNameSupported() {
|
||||
const testKey = 'test';
|
||||
const storage = window.localStorage;
|
||||
try {
|
||||
storage.setItem(testKey, '1');
|
||||
storage.removeItem(testKey);
|
||||
return true;
|
||||
} catch (error) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
export function getLocalizedPathname(path, zhCN, query = {}, hash) {
|
||||
const pathname = path.startsWith('/') ? path : `/${path}`;
|
||||
let fullPath;
|
||||
if (!zhCN) {
|
||||
// to enUS
|
||||
fullPath = /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
|
||||
} else if (pathname === '/') {
|
||||
fullPath = '/index-cn';
|
||||
} else if (pathname.endsWith('/')) {
|
||||
fullPath = pathname.replace(/\/$/, '-cn/');
|
||||
} else {
|
||||
fullPath = `${pathname}-cn`;
|
||||
}
|
||||
if (hash) {
|
||||
const localHash = hash[zhCN ? 'zhCN' : 'enUS'];
|
||||
fullPath += `#${localHash}`;
|
||||
}
|
||||
return { path: fullPath, query };
|
||||
}
|
@ -2,18 +2,6 @@ export function isZhCN(name: string): boolean {
|
||||
return /-cn\/?$/.test(name);
|
||||
}
|
||||
|
||||
export function isLocalStorageNameSupported() {
|
||||
const testKey = 'test';
|
||||
const storage = window.localStorage;
|
||||
try {
|
||||
storage.setItem(testKey, '1');
|
||||
storage.removeItem(testKey);
|
||||
return true;
|
||||
} catch (error) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export function getLocalizedPathname(
|
||||
path: string,
|
||||
zhCN?: boolean,
|
||||
|
Loading…
Reference in New Issue
Block a user