flipping card not working after adding class 'flipped&#


Topic: flipping card not working after adding class 'flipped'

moulot pro premium priority asked 5 years ago

Hello, after adding the 'flipped' class like this : const cardRotating = this.el.nativeElement.querySelectorAll('.card-rotating'); this.renderer.addClass(cardRotating[0], 'flipped'); the back side appears with no problem but the rotating effect doesn't work anymore when clicking the a link of the card. tahnk you


Arkadiusz Idzikowski staff commented 5 years ago

What is the use case here? What exactly would you like to achieve when adding this class manually?


Arkadiusz Idzikowski staff answered 5 years ago

In this case you should use built-in toggle method, here is an example:

HTML:

<!--Rotating card-->
<div class="col-md-4">
  <mdb-flipping-card #cards>
    <!--Front Side-->
    <div class="face front tp-box_side tp-box_front">

      <!-- Image-->
      <div class="card-up">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2859%29.jpg" class="img-fluid">
      </div>
      <!--Avatar-->
      <div class="avatar">
        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%289%29.jpg" class="rounded-circle img-responsive">
      </div>
      <!--Content-->
      <div class="card-body">
        <h4>Jonathan Doe</h4>
        <p>Web developer</p>
        <!--Triggering button-->
        <a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">
          <mdb-icon fas icon="redo"></mdb-icon> Click here to rotate</a>
      </div>
    </div>
    <!--/.Front Side-->

    <!--Back Side-->
    <div class="back tp-box_side tp-box_back">

      <!--Content-->
      <h4>About me</h4>
      <hr>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem
        amet repellat,
        dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium
        quaerat?</p>
      <hr>
      <!--Social Icons-->
      <ul class="list-inline">
        <li class="list-inline-item">
          <a class="icons-sm fb-ic">
            <mdb-icon fab icon="facebook-f"></mdb-icon>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="icons-sm tw-ic">
            <mdb-icon fab icon="twitter"></mdb-icon>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="icons-sm gplus-ic">
            <mdb-icon fab icon="google-plus"></mdb-icon>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="icons-sm li-ic">
            <mdb-icon fab icon="linkedin-in"></mdb-icon>
          </a>
        </li>
      </ul>
      <!--Triggering button-->
      <a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">
        <mdb-icon fas icon="undo"></mdb-icon> Click here to rotate back</a>

    </div>
    <!--/.Back Side-->
  </mdb-flipping-card>
</div>
<!--/.Rotating card-->

TS:

@ViewChild('cards', { static: true }) flippingCard: CardRotatingComponent;

  ngOnInit() {
    this.flippingCard.toggle();
  }

moulot pro premium priority answered 5 years ago

I add this class so the back side of the card is viewed when the page loads for the first time.


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: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.8.1
  • Device: dell notebook
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No