文章/答案/技术大牛

发布

社区首页 >问答首页 >Boostrap 4下拉菜单动画从页面外部启动

问Boostrap 4下拉菜单动画从页面外部启动
EN

Stack Overflow用户

提问于 2019-10-29 16:49:56

回答 1查看 127关注 0票数 0

我有一行包含两个div，一个是col md-11，另一个是col md-1。在这个col 1 div中，我有一个需要动画的下拉列表。对于动画，我使用animate css，但问题是动画slideInRight从页面外部开始。我想要的动画应该是从行边界开始，而不是在页面外下面是我的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>

在这个动画slideInRight类中提供了滑入的动画。

bootstrap-4

html

css

animation

回答 1

Stack Overflow用户

发布于 2019-10-30 21:58:49

在这个回答中，我在您的问题中使用了更新的代码，并对animate.css代码和Bootstrap4 drop-down项目进行了必要的修改，以便最终结果更符合我所理解的声明的要求：

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

这个解决方案是完全可适应的，如果你想最终完成它，我很乐意与你合作：)

重要细节：

Bootstrap 4类text-right和dropdown-menu-lg-left不兼容。如果将text-right添加到col-md-5.
I，则菜单按钮在任何情况下都不会向左移动。更改了translate3d的'y‘属性，使slideInRight显示在按钮下面。如果您希望menu-item在按钮滑入时覆盖该按钮，则不需要进行此更改。如果你想改变它，那么所有引用到translate3d的都应该把'y‘元素放回0：

translate3d(9rem, 2rem, 0);将成为translate3d(9rem, 0, 0);，并对所有对translate3d的引用进行类似的更改。

我更改的dropdown-item属性还演示了此元素的适应性，而无需使用内联样式(如在以前版本的代码中编写的那样)。

我希望这个答案能帮助Feroz。如上所述，我将非常高兴与您合作，以完成解决方案，以满足您的要求。：)

        .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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58603981

复制

相似问题

问Boostrap 4下拉菜单动画从页面外部启动
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Boostrap 4下拉菜单动画从页面外部启动EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Boostrap 4下拉菜单动画从页面外部启动
EN