deblan-mirror/vanilla-tilt.js
deblan-mirror/vanilla-tilt.js
1
0
Fork 0
mirror of https://github.com/micku7zu/vanilla-tilt.js synced 2024-06-09 01:02:13 +02:00
Code Issues Projects Releases Wiki Activity

Clear everything on destroy().

Browse source
This commit is contained in:
SandorS 2017-07-10 10:11:23 +03:00
parent 8e8274bae6
commit d196700e78
8 changed files with 95 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
dist/vanilla-tilt.babel.js vendored
View file

@ -11,7 +11,7 @@ var classCallCheck = function (instance, Constructor) {
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
* Original idea: https://github.com/gijsroge/tilt.js
* MIT License.
* Version 1.4.0
* Version 1.4.1
*/
var VanillaTilt = function () {
@ -31,6 +31,7 @@ var VanillaTilt = function () {
this.updateCall = null;
this.updateBind = this.update.bind(this);
this.resetBind = this.reset.bind(this);
this.element = element;
this.settings = this.extendSettings(settings);
@ -75,6 +76,13 @@ var VanillaTilt = function () {
};
VanillaTilt.prototype.destroy = function destroy() {
clearTimeout(this.transitionTimeout);
if (this.updateCall !== null) {
cancelAnimationFrame(this.updateCall);
}
this.reset();
this.removeEventListeners();
this.element.vanillaTilt = null;
delete this.element.vanillaTilt;
@ -101,21 +109,17 @@ var VanillaTilt = function () {
this.setTransition();
if (this.settings.reset) {
this.reset();
requestAnimationFrame(this.resetBind);
}
};
VanillaTilt.prototype.reset = function reset() {
var _this = this;
this.event = {
pageX: this.left + this.width / 2,
pageY: this.top + this.height / 2
};
requestAnimationFrame(function () {
_this.event = {
pageX: _this.left + _this.width / 2,
pageY: _this.top + _this.height / 2
};
_this.element.style.transform = "perspective(" + _this.settings.perspective + "px) " + "rotateX(0deg) " + "rotateY(0deg) " + "scale3d(1, 1, 1)";
});
this.element.style.transform = "perspective(" + this.settings.perspective + "px) " + "rotateX(0deg) " + "rotateY(0deg) " + "scale3d(1, 1, 1)";
if (this.glare) {
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
@ -231,16 +235,16 @@ var VanillaTilt = function () {
};
VanillaTilt.prototype.setTransition = function setTransition() {
var _this2 = this;
var _this = this;
clearTimeout(this.transitionTimeout);
this.element.style.transition = this.settings.speed + "ms " + this.settings.easing;
if (this.glare) this.glareElement.style.transition = "opacity " + this.settings.speed + "ms " + this.settings.easing;
this.transitionTimeout = setTimeout(function () {
_this2.element.style.transition = "";
if (_this2.glare) {
_this2.glareElement.style.transition = "";
_this.element.style.transition = "";
if (_this.glare) {
_this.glareElement.style.transition = "";
}
}, this.settings.speed);
};

2
dist/vanilla-tilt.babel.min.js vendored
View file

File diff suppressed because one or more lines are too long

30
dist/vanilla-tilt.js vendored
View file

@ -5,7 +5,7 @@ var VanillaTilt = (function () {
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
* Original idea: https://github.com/gijsroge/tilt.js
* MIT License.
* Version 1.4.0
* Version 1.4.1
*/
class VanillaTilt {
@ -22,6 +22,7 @@ class VanillaTilt {
this.updateCall = null;
this.updateBind = this.update.bind(this);
this.resetBind = this.reset.bind(this);
this.element = element;
this.settings = this.extendSettings(settings);
@ -66,6 +67,13 @@ class VanillaTilt {
}
destroy() {
clearTimeout(this.transitionTimeout);
if (this.updateCall !== null) {
cancelAnimationFrame(this.updateCall);
}
this.reset();
this.removeEventListeners();
this.element.vanillaTilt = null;
delete this.element.vanillaTilt;
@ -92,22 +100,20 @@ class VanillaTilt {
this.setTransition();
if (this.settings.reset) {
this.reset();
requestAnimationFrame(this.resetBind);
}
}
reset() {
requestAnimationFrame(() => {
this.event = {
pageX: this.left + this.width / 2,
pageY: this.top + this.height / 2
};
this.event = {
pageX: this.left + this.width / 2,
pageY: this.top + this.height / 2
};
this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
"rotateX(0deg) " +
"rotateY(0deg) " +
"scale3d(1, 1, 1)";
});
this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
"rotateX(0deg) " +
"rotateY(0deg) " +
"scale3d(1, 1, 1)";
if (this.glare) {
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';

2
dist/vanilla-tilt.min.js vendored
View file

File diff suppressed because one or more lines are too long

30
lib/vanilla-tilt.es2015.js
View file

@ -2,7 +2,7 @@
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
* Original idea: https://github.com/gijsroge/tilt.js
* MIT License.
* Version 1.4.0
* Version 1.4.1
*/
class VanillaTilt {
@ -19,6 +19,7 @@ class VanillaTilt {
this.updateCall = null;
this.updateBind = this.update.bind(this);
this.resetBind = this.reset.bind(this);
this.element = element;
this.settings = this.extendSettings(settings);
@ -63,6 +64,13 @@ class VanillaTilt {
}
destroy() {
clearTimeout(this.transitionTimeout);
if (this.updateCall !== null) {
cancelAnimationFrame(this.updateCall);
}
this.reset();
this.removeEventListeners();
this.element.vanillaTilt = null;
delete this.element.vanillaTilt;
@ -89,22 +97,20 @@ class VanillaTilt {
this.setTransition();
if (this.settings.reset) {
this.reset();
requestAnimationFrame(this.resetBind);
}
}
reset() {
requestAnimationFrame(() => {
this.event = {
pageX: this.left + this.width / 2,
pageY: this.top + this.height / 2
};
this.event = {
pageX: this.left + this.width / 2,
pageY: this.top + this.height / 2
};
this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
"rotateX(0deg) " +
"rotateY(0deg) " +
"scale3d(1, 1, 1)";
});
this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
"rotateX(0deg) " +
"rotateY(0deg) " +
"scale3d(1, 1, 1)";
if (this.glare) {
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';

34
lib/vanilla-tilt.js
View file

@ -10,7 +10,7 @@ var classCallCheck = function (instance, Constructor) {
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
* Original idea: https://github.com/gijsroge/tilt.js
* MIT License.
* Version 1.4.0
* Version 1.4.1
*/
var VanillaTilt = function () {
@ -30,6 +30,7 @@ var VanillaTilt = function () {
this.updateCall = null;
this.updateBind = this.update.bind(this);
this.resetBind = this.reset.bind(this);
this.element = element;
this.settings = this.extendSettings(settings);
@ -74,6 +75,13 @@ var VanillaTilt = function () {
};
VanillaTilt.prototype.destroy = function destroy() {
clearTimeout(this.transitionTimeout);
if (this.updateCall !== null) {
cancelAnimationFrame(this.updateCall);
}
this.reset();
this.removeEventListeners();
this.element.vanillaTilt = null;
delete this.element.vanillaTilt;
@ -100,21 +108,17 @@ var VanillaTilt = function () {
this.setTransition();
if (this.settings.reset) {
this.reset();
requestAnimationFrame(this.resetBind);
}
};
VanillaTilt.prototype.reset = function reset() {
var _this = this;
this.event = {
pageX: this.left + this.width / 2,
pageY: this.top + this.height / 2
};
requestAnimationFrame(function () {
_this.event = {
pageX: _this.left + _this.width / 2,
pageY: _this.top + _this.height / 2
};
_this.element.style.transform = "perspective(" + _this.settings.perspective + "px) " + "rotateX(0deg) " + "rotateY(0deg) " + "scale3d(1, 1, 1)";
});
this.element.style.transform = "perspective(" + this.settings.perspective + "px) " + "rotateX(0deg) " + "rotateY(0deg) " + "scale3d(1, 1, 1)";
if (this.glare) {
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
@ -230,16 +234,16 @@ var VanillaTilt = function () {
};
VanillaTilt.prototype.setTransition = function setTransition() {
var _this2 = this;
var _this = this;
clearTimeout(this.transitionTimeout);
this.element.style.transition = this.settings.speed + "ms " + this.settings.easing;
if (this.glare) this.glareElement.style.transition = "opacity " + this.settings.speed + "ms " + this.settings.easing;
this.transitionTimeout = setTimeout(function () {
_this2.element.style.transition = "";
if (_this2.glare) {
_this2.glareElement.style.transition = "";
_this.element.style.transition = "";
if (_this.glare) {
_this.glareElement.style.transition = "";
}
}, this.settings.speed);
};

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "vanilla-tilt",
"version": "1.4.0",
"version": "1.4.1",
"description": "A smooth 3D tilt javascript library forked from Tilt.js",
"main": "lib/vanilla-tilt.js",
"module_es2015": "lib/vanilla-tilt.es2015.js",

30
src/vanilla-tilt.js
View file

@ -2,7 +2,7 @@
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
* Original idea: https://github.com/gijsroge/tilt.js
* MIT License.
* Version 1.4.0
* Version 1.4.1
*/
export default class VanillaTilt {
@ -19,6 +19,7 @@ export default class VanillaTilt {
this.updateCall = null;
this.updateBind = this.update.bind(this);
this.resetBind = this.reset.bind(this);
this.element = element;
this.settings = this.extendSettings(settings);
@ -63,6 +64,13 @@ export default class VanillaTilt {
}
destroy() {
clearTimeout(this.transitionTimeout);
if (this.updateCall !== null) {
cancelAnimationFrame(this.updateCall);
}
this.reset();
this.removeEventListeners();
this.element.vanillaTilt = null;
delete this.element.vanillaTilt;
@ -89,22 +97,20 @@ export default class VanillaTilt {
this.setTransition();
if (this.settings.reset) {
this.reset();
requestAnimationFrame(this.resetBind);
}
}
reset() {
requestAnimationFrame(() => {
this.event = {
pageX: this.left + this.width / 2,
pageY: this.top + this.height / 2
};
this.event = {
pageX: this.left + this.width / 2,
pageY: this.top + this.height / 2
};
this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
"rotateX(0deg) " +
"rotateY(0deg) " +
"scale3d(1, 1, 1)";
});
this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
"rotateX(0deg) " +
"rotateY(0deg) " +
"scale3d(1, 1, 1)";
if (this.glare) {
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';