Skip to content

Commit

Permalink
fix perspective compatibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@xieyu33333
xieyu33333 committed Jun 30, 2016
1 parent fbbf8b6 commit f2845fb
Show file tree
Hide file tree
Showing 11 changed files with 35 additions and 22 deletions.
12 changes: 8 additions & 4 deletions build/iSlider.animate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@
}
}

iSlider.setStyle(this.wrap, 'perspective', scale * 4);
var outer = dom.parentElement;
iSlider.setStyle(outer, 'perspective', scale * 4);

dom.style.visibility = 'visible';
if (direct > 0 && i === 2) {
Expand Down Expand Up @@ -64,7 +65,8 @@
offset = -offset;
}

iSlider.setStyle(this.wrap, 'perspective', scale * 4);
var outer = dom.parentElement;
iSlider.setStyle(outer, 'perspective', scale * 4);

dom.style.visibility = 'visible';
if (direct > 0 && i === 2) {
Expand All @@ -86,7 +88,8 @@

function depth(dom, axis, scale, i, offset, direct) {
var zoomScale = (4 - Math.abs(i - 1)) * 0.18;
iSlider.setStyle(this.wrap, 'perspective', scale * 4);
var outer = dom.parentElement;
iSlider.setStyle(outer, 'perspective', scale * 4);
dom.style.zIndex = i === 1 ? 1 : 0;
iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)');
}
Expand All @@ -100,8 +103,9 @@
var rotateDirect = (axis === 'X') ? 'Y' : 'X';
var directAmend = (axis === 'X') ? 1 : -1;
var offsetRatio = Math.abs(offset / scale);
var outer = dom.parentElement;

iSlider.setStyle(this.wrap, 'perspective', scale * 4);
iSlider.setStyle(outer, 'perspective', scale * 4);

if (i === 1) {
dom.style.zIndex = scale - absoluteOffset;
Expand Down
2 changes: 1 addition & 1 deletion build/iSlider.animate.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions build/iSlider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -952,6 +952,7 @@
outer = document.createElement('ul');
}
outer.className = 'islider-outer';

//outer.style.overflow = 'hidden';
// no need...
// outer.style.cssText += 'width:' + this.width + 'px;height:' + this.height + 'px';
Expand All @@ -966,6 +967,7 @@

for (var i = 0; i < 3; i++) {
var li = document.createElement('li');
outer.appendChild(li);
this.els.push(li);

// prepare style animation
Expand All @@ -979,8 +981,6 @@
this.isVertical && (this.animateType === 'rotate' || this.animateType === 'flip')
? this._renderItem(li, 1 - i + this.slideIndex)
: this._renderItem(li, i - 1 + this.slideIndex);

outer.appendChild(li);
}

this._changedStyles();
Expand Down
2 changes: 1 addition & 1 deletion build/iSlider.min.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions demo/debug.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
-webkit-box-pack: center;
-webkit-box-align: center;
list-style: none;
/*border: 1px solid #ffffff;*/
}

#iSlider-wrapper li img {
Expand Down
12 changes: 8 additions & 4 deletions demo/public/js/iSlider.animate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@
}
}

iSlider.setStyle(this.wrap, 'perspective', scale * 4);
var outer = dom.parentElement;
iSlider.setStyle(outer, 'perspective', scale * 4);

dom.style.visibility = 'visible';
if (direct > 0 && i === 2) {
Expand Down Expand Up @@ -64,7 +65,8 @@
offset = -offset;
}

iSlider.setStyle(this.wrap, 'perspective', scale * 4);
var outer = dom.parentElement;
iSlider.setStyle(outer, 'perspective', scale * 4);

dom.style.visibility = 'visible';
if (direct > 0 && i === 2) {
Expand All @@ -86,7 +88,8 @@

function depth(dom, axis, scale, i, offset, direct) {
var zoomScale = (4 - Math.abs(i - 1)) * 0.18;
iSlider.setStyle(this.wrap, 'perspective', scale * 4);
var outer = dom.parentElement;
iSlider.setStyle(outer, 'perspective', scale * 4);
dom.style.zIndex = i === 1 ? 1 : 0;
iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)');
}
Expand All @@ -100,8 +103,9 @@
var rotateDirect = (axis === 'X') ? 'Y' : 'X';
var directAmend = (axis === 'X') ? 1 : -1;
var offsetRatio = Math.abs(offset / scale);
var outer = dom.parentElement;

iSlider.setStyle(this.wrap, 'perspective', scale * 4);
iSlider.setStyle(outer, 'perspective', scale * 4);

if (i === 1) {
dom.style.zIndex = scale - absoluteOffset;
Expand Down
2 changes: 1 addition & 1 deletion demo/public/js/iSlider.animate.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions demo/public/js/iSlider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -952,6 +952,7 @@
outer = document.createElement('ul');
}
outer.className = 'islider-outer';

//outer.style.overflow = 'hidden';
// no need...
// outer.style.cssText += 'width:' + this.width + 'px;height:' + this.height + 'px';
Expand All @@ -966,6 +967,7 @@

for (var i = 0; i < 3; i++) {
var li = document.createElement('li');
outer.appendChild(li);
this.els.push(li);

// prepare style animation
Expand All @@ -979,8 +981,6 @@
this.isVertical && (this.animateType === 'rotate' || this.animateType === 'flip')
? this._renderItem(li, 1 - i + this.slideIndex)
: this._renderItem(li, i - 1 + this.slideIndex);

outer.appendChild(li);
}

this._changedStyles();
Expand Down
2 changes: 1 addition & 1 deletion demo/public/js/iSlider.min.js
View file

Large diffs are not rendered by default.

12 changes: 8 additions & 4 deletions src/js/ext/animate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@
}
}

iSlider.setStyle(this.wrap, 'perspective', scale * 4);
var outer = dom.parentElement;
iSlider.setStyle(outer, 'perspective', scale * 4);

dom.style.visibility = 'visible';
if (direct > 0 && i === 2) {
Expand Down Expand Up @@ -64,7 +65,8 @@
offset = -offset;
}

iSlider.setStyle(this.wrap, 'perspective', scale * 4);
var outer = dom.parentElement;
iSlider.setStyle(outer, 'perspective', scale * 4);

dom.style.visibility = 'visible';
if (direct > 0 && i === 2) {
Expand All @@ -86,7 +88,8 @@

function depth(dom, axis, scale, i, offset, direct) {
var zoomScale = (4 - Math.abs(i - 1)) * 0.18;
iSlider.setStyle(this.wrap, 'perspective', scale * 4);
var outer = dom.parentElement;
iSlider.setStyle(outer, 'perspective', scale * 4);
dom.style.zIndex = i === 1 ? 1 : 0;
iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)');
}
Expand All @@ -100,8 +103,9 @@
var rotateDirect = (axis === 'X') ? 'Y' : 'X';
var directAmend = (axis === 'X') ? 1 : -1;
var offsetRatio = Math.abs(offset / scale);
var outer = dom.parentElement;

iSlider.setStyle(this.wrap, 'perspective', scale * 4);
iSlider.setStyle(outer, 'perspective', scale * 4);

if (i === 1) {
dom.style.zIndex = scale - absoluteOffset;
Expand Down
4 changes: 2 additions & 2 deletions src/js/iSlider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -952,6 +952,7 @@
outer = document.createElement('ul');
}
outer.className = 'islider-outer';

//outer.style.overflow = 'hidden';
// no need...
// outer.style.cssText += 'width:' + this.width + 'px;height:' + this.height + 'px';
Expand All @@ -966,6 +967,7 @@

for (var i = 0; i < 3; i++) {
var li = document.createElement('li');
outer.appendChild(li);
this.els.push(li);

// prepare style animation
Expand All @@ -979,8 +981,6 @@
this.isVertical && (this.animateType === 'rotate' || this.animateType === 'flip')
? this._renderItem(li, 1 - i + this.slideIndex)
: this._renderItem(li, i - 1 + this.slideIndex);

outer.appendChild(li);
}

this._changedStyles();
Expand Down

0 comments on commit f2845fb

Please sign in to comment.