Js 애니메이션 호환성 transition 과 transform 실현
오늘 순수 수공 js 로 그림 스크롤 효 과 를 만 들 때 불쾌 한 호 환 사건 을 만 났 습 니 다.이전 js 설정 그림 스크롤 애니메이션 효 과 는 다음 과 같 습 니 다.
var addSlideStyle = function(time, leftWidth) {
time = time || 0;
leftWidth = leftWidth || 0;
return 'transition: all ' + time + 's ease-in-out; transform: translate3d(' + leftWidth + 'px, 0px, 0px);';
};
// ：
slideUlObj.style = addSlideStyle();이상 은 js 로 style 스타일 을 설정 하 는 방식 으로 이 루어 졌 습 니 다. pc 에서 여러 가지 좋 은 것 을 표시 하고 자동 으로 스크롤 할 수 있 으 며 핸드폰 에 도착 하 자마자 여러 가지 호 환 되 지 않 고 나 왔 습 니 다.addSlide Style 에 - webkit - 접 두 사 를 추가 해도 해결 되 지 않 았 습 니 다.
그래서 각종 검색 은 원래 mobile 의 호 환 문 제 였 고 js 설정 애니메이션 으로 바 뀌 었 습 니 다.
var setTransition = function(obj, time) {
time = time || 0;
var style = 'all ' + time + 's ease-in-out';
obj.style.webkitTransition = style;
obj.style.transition = style;
};
var setTransform = function(obj, leftWidth) {
leftWidth = leftWidth || 0;
var style = 'translate3d(' + leftWidth + 'px, 0px, 0px)';
obj.style.webkitTransform = style;
obj.style.transform = style;
};
var setAnimate = function(obj, time, leftWidth) {
setTransition(obj, time);
setTransform(obj, leftWidth);
};
//
setAnimate(slideUlObj);지식 소 과학 보급: 그 중에서 각종 브 라 우 저 호환성 형식 을 설정 하면 다음 과 같 습 니 다.
webkitProperty
MozProperty
msProperty
OProperty
property
//
element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
AWS 계정 간 AMI 공유여러 AWS 루트 계정을 가지고 있으며 하나를 폐지하고 싶습니다. 거기에서 만든 EC2 인스턴스를 마이그레이션(공유)하는 경우 AMI로 쉽게 실현할 수 있습니다. 절차로서 1. EC2 인스턴스의 이미지 생성 imag...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
