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);
    }

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 0 Best answer

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

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 0 Best answer

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

Thanks for all Your support.

Best regards.

Add comment

Deepshore answered 6 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

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

swoy45

5Support score
1Questions 0Answers

0Snippets likes 0Snippets