Boostrap 4 dropmenu Animation starts from outside the page

Question

I have a row which contain two div one with col-md-11 and other is col-md-1. In this col-md-1 div i have a dropdown which i need to animate. For animation i am using animate css but problem is animation slideInRight start from page outside. I want the animation should be start from row boundaries not outside the page below is my html

    <div class="row m-0">
<div class="col-md-7">
</div>
<div class="col-md-5 text-right">
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left animated slideInRight" style="width:500px;">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>
</div>

</div>

In this animated slideInRight class provide the animation of sliding in.

Answer 1

In this answer I have used the updated code in your question and made necessary modifications to the animate.css code and to Bootstrap4 drop-down item so that the final outcome more closely conforms to the stated requirements as I understood them:

CSS

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(9rem, 2rem, 0);
    transform: translate3d(9rem, 2rem, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 2rem, 0);
    transform: translate3d(0, 2rem, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(9rem, 2rem, 0);
    transform: translate3d(9rem, 2rem, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 2rem, 0);
    transform: translate3d(0, 2rem, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

.dropdown-item {
    height: 2rem !important;
    margin-bottom: 1rem !important;
    padding: 1rem !important;
    width: 25rem !important;
}

This solution is fully adaptable, if you would like to finalise it I'll be happy to work with you on it : )

Important details:

• Bootstrap 4 classes text-right and dropdown-menu-lg-left are incompatible. The menu button does not move left under any conditions if text-right is added to col-md-5.

• I changed the 'y' attribute of translate3d so that slideInRight appears under the button. This change is not necessary if you want menu-item to cover the button when it slides in. If you want to change it then all references to translate3d should have the 'y' element put back to 0:

  translate3d(9rem, 2rem, 0); would become translate3d(9rem, 0, 0); with similar changes made to all references to translate3d.

• The dropdown-item attributes I changed also demonstrate the adaptability of this element without using inline styling (as written in the previous version of your code).

I hope this answer helps Feroz. As stated, I will be very happy to work with you to complete the solution to fit with your requirements. : )

        .animated {
          -webkit-animation-duration: 1s;
          animation-duration: 1s;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
        }
        
        @-webkit-keyframes slideInRight {
          from {
            -webkit-transform: translate3d(9rem, 2rem, 0);
            transform: translate3d(9rem, 2rem, 0);
            visibility: visible;
          }

          to {
            -webkit-transform: translate3d(0, 2rem, 0);
            transform: translate3d(0, 2rem, 0);
          }
        }

        @keyframes slideInRight {
          from {
            -webkit-transform: translate3d(9rem, 2rem, 0);
            transform: translate3d(9rem, 2rem, 0);
            visibility: visible;
          }

          to {
            -webkit-transform: translate3d(0, 2rem, 0);
            transform: translate3d(0, 2rem, 0);
          }
        }

        .slideInRight {
          -webkit-animation-name: slideInRight;
          animation-name: slideInRight;
        }
        
        .dropdown-item {
            height: 2rem !important;
			      margin-bottom: 1rem !important;
            padding: 1rem !important;
            width: 25rem !important;
        }

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  </head>
  
  <body>

      <!-- <div class="container"> -->
          
          <div class="row m-0">
              <div class="col-md-7"></div>
              <div class="col-md-5">
                  <div class="btn-group">
                      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
                          Right-aligned
                      </button>
                      <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left animated slideInRight" style="">
                          <button class="dropdown-item" type="button">Action</button>
                          <button class="dropdown-item" type="button">Another action</button>
                          <button class="dropdown-item" type="button">Something else here</button>
                      </div>
                  </div>
              </div>
          </div>
          
      <!-- </div> -->

	
	<!-- javascript -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  
  </body>
</html>