Modal enter transitions on vue


Topic: Modal enter transitions on vue

swoy45 asked 6 years ago

Enter transition animations not working for modals, it just showing immediately. Tried to debug it and found out that enter and after enter events won't start at all. Added alert to enter and leave events and it's working only for leave event. Tried it for blank project and for downloaded sample project as well, the result is the same.

enter(el) {
      el.style.opacity = 0;
      alert(); //not working
      el.childNodes[0].style.transform = this.dialogTransform;
    },
    afterEnter(el) {
      this.$emit('shown', this);
      el.style.opacity = 1;
      alert(); //not working
      el.childNodes[0].style.transform = 'translate(0,0)';
    },
    beforeLeave(el) {
      el.style.opacity = 0;
      alert(); //working well
      el.childNodes[0].style.transform = this.dialogTransform;
    },
    afterLeave() {
      alert(); //working well
      this.$parent.$emit('hidden', this);
    }

Mikołaj Smoleński staff answered 6 years ago

Thanks for reporting about the issue. We're going to fix it in the next release.

Best regards


swoy45 commented 6 years ago

Is there a way to fix it by myself and not waiting for new release?


Mikołaj Smoleński staff commented 6 years ago

We're still working on that issue. There is a chance that it is connected with the node or npm versions. I'll let You know as soon as we fix it.

Best regards


Mikołaj Smoleński staff commented 6 years ago

Could You write here which version of Vue do You use? Thanks in advance


swoy45 commented 6 years ago

Vue 3.5.1installed using npm


Mikołaj Smoleński staff answered 6 years ago

We've fixed the issue. The update will be released on monday.

Thanks for all Your support.

Best regards.


Deepshore answered 6 years ago

This update made it worse. We don't see any animation as before and our modal content, which is being pulled from the main page cannot be loaded anymore.


Mikołaj Smoleński staff commented 6 years ago

Hi there,

Could You share Your code here?

Best regards


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.1.1
  • Device: iMac 21.5 2013
  • Browser: Chrome
  • OS: MacOS 10.14.3
  • Provided sample code: No
  • Provided link: No