shx-3d-render
parent
cf0f474eb0
commit
b4812c98fe
|
@ -15,7 +15,6 @@
|
|||
{% endcomment %}
|
||||
|
||||
<shx-input-forms>
|
||||
<p>shx-input-forms</p>
|
||||
</shx-input-forms>
|
||||
|
||||
{% if product.images.size > 0 %}
|
||||
|
@ -55,10 +54,12 @@
|
|||
super();
|
||||
// element functionality written in here
|
||||
this.currentVariant = null;
|
||||
this.container = null;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.innerHTML = "";
|
||||
this.innerHTML = '<div class="shx-input-forms-container"></div>;
|
||||
this.container = this.querySelector('.shx-input-forms-container');
|
||||
}
|
||||
|
||||
initCurrentVariant(id) {
|
||||
|
@ -76,7 +77,7 @@
|
|||
this.currentVariant = id;
|
||||
|
||||
// edit inner html
|
||||
this.innerHTML = "";
|
||||
this.container.innerHTML = "";
|
||||
|
||||
for(let key in globalInputFormsObj) {
|
||||
if(key === this.currentVariant) {
|
||||
|
@ -89,18 +90,18 @@
|
|||
|
||||
if(openAnimation) {
|
||||
// calculate of this height
|
||||
let height = this.offsetHeight;
|
||||
let height = this.container.offsetHeight;
|
||||
|
||||
this.style.height = '0px';
|
||||
this.container.style.height = '0px';
|
||||
|
||||
function animate() {
|
||||
anime({
|
||||
targets: this,
|
||||
targets: this.container,
|
||||
height: height,
|
||||
duration: 500,
|
||||
easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)',
|
||||
complete: function() {
|
||||
this.style.height = 'auto';
|
||||
this.container.style.height = 'auto';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -116,9 +117,9 @@
|
|||
});
|
||||
}
|
||||
} else {
|
||||
this.style.opacity = 0;
|
||||
this.container.style.opacity = 0;
|
||||
anime({
|
||||
targets: this,
|
||||
targets: this.container,
|
||||
opacity: 1,
|
||||
duration: 500,
|
||||
easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)'
|
||||
|
|
Loading…
Reference in New Issue