Topic: MDB-Stepper not animating properly

Sebopede free asked 4 years ago


Expected behavior

Within the mdb-stepper, the step-new-content should smoothly transition into view after clicking the step-title

Actual behavior

When clicking the step title, the step-new-content does not smoothly transition into view. Instead, it abruptly appears into view without any transition animation

Resources (screenshots, code snippets etc.)

Step1 Step2 Step3 Step4


Arkadiusz Idzikowski staff commented 4 years ago

Please provide some gif/short video on which we will be able to see this problem and the code you used to render the stepper component.


Sebopede free answered 4 years ago


    <div>Content for Step2</div>
    <div>Content for Step2</div>
    <div>Content for Step2</div>
    <div>Content for Step2</div>

</mdb-step>

<mdb-step name="Step3">

    <div>Content for Step3</div>
    <div>Content for Step3</div>
    <div>Content for Step3</div>
    <div>Content for Step3</div>

</mdb-step>


Sebopede free commented 4 years ago

For some reason, it is not showing the upper half of the code, but i am simply copying the mdb-stepper code from angular Section, there is an opening and closing call with the [vertical]="true" enabled.


Arkadiusz Idzikowski staff commented 4 years ago

Please edit your first post and add all the code there, because it might be not possible to add the code snippet in the comment. You can send the additional resources to a.idzikowski@mdbootstrap.com


Sebopede free answered 4 years ago


Greetings!I have a short gif of the MDB-stepper not functionning properly, but it is not letting me post the .gif file on this board, is there another way i can send it to you? furthermore, here is the code i use for the stepper, but this is directly taken from documentation, i have copied it from angular docs:


Sebopede free commented 4 years ago

    <div>Content for Step2</div>
    <div>Content for Step2</div>
    <div>Content for Step2</div>
    <div>Content for Step2</div>

</mdb-step>

<mdb-step name="Step2" >

    <div>Content for Step2</div>
    <div>Content for Step2</div>
    <div>Content for Step2</div>
    <div>Content for Step2</div>

</mdb-step>

<mdb-step name="Step3">

    <div>Content for Step3</div>
    <div>Content for Step3</div>
    <div>Content for Step3</div>
    <div>Content for Step3</div>

</mdb-step>



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.2.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No