![](/img/trans.png)
[英]How to move a button from one div to another when clicked in reactjs?
[英]How to create slide effect on button when clicked on one from another
我想知道如何在按鈕或標簽上創建像網站stripe.com這樣的幻燈片效果
這是我的設計
前端代碼
<nav id="sw-nav-developers" class="nav flex-md-column justify-content-between justify-content-md-start nav-pills nav-pills-light nav-fill"><a class="nav-item nav-link text-md-left active" data-toggle="tab" href="#payasyou-tab"><i class="icon fas fa-code"></i> HTML Structure</a>
<hr class="mt-2">
<a class="nav-link accent" style="color:#db78dd;font-weight: 600;text-transform: uppercase;">Software Coverage <i class="icon fas fa-long-arrow-alt-right"></i></a>
<a class="nav-item nav-link text-md-left " data-toggle="tab" href="#basic-tab"><i class="icon fas fa-code"></i>Basic</a>
<a class="nav-item nav-link text-md-left" data-toggle="tab" href="#pro-tab"><i class="icon fab fa-sass"></i> Pro</a>
<a class="nav-item nav-link text-md-left" href="#premium-tab" data-toggle="tab"><i class="icon fas fa-retweet fa-rotate-90"></i> Premium</a> <a class="nav-item nav-link text-md-left" href="#exclusive-tab" data-toggle="tab"><i class="icon fas fa-exclamation-triangle"></i> Exclusive</a>
<hr class="mt-2"><a class="nav-link accent" style="color:#45b2e8;font-weight: 600;text-transform: uppercase;">Hardware Coverage <i class="icon fas fa-long-arrow-alt-right"></i></a>
<a class="nav-item nav-link text-md-left " data-toggle="tab" href="#oneyear-tab"><i class="icon fas fa-code"></i> HTML Structure</a> <a class="nav-item nav-link text-md-left" data-toggle="tab" href="#twoyear-tab"><i class="icon fab fa-sass"></i> SASS compiler</a> </nav>
現在我實現了懸停的滑動效果,但如何在按鈕單擊或激活時實現此功能。
我用過的CSS
nav#sw-nav-developers a.nav-item {
position: relative;
width: 100%;
padding-left: 12px;
font-family: Camphor,Open Sans,Segoe UI,sans-serif;
text-align: left;
cursor: pointer;
border: none;
outline: none;
background: none;
-webkit-transition: color .3s;
transition: color .3s;
height: 34px;
transition:.5s;
}
.nav-pills-light .nav-link.active:before {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(50,50,93,.11);
overflow:hidden;
z-index:-99;
transform:scaleY(0);
transform-origin:bottom;
transition:transform 5s ease-in-out;
}
.nav-pills-light .nav-link.active:active:before {
transform:scaleY(1);
transform-origin:top;
}
請幫助我實現此參考,您可以在stripe.com上看到相同的效果
無法理解你的要求,但如果你說你設法通過以下方式實現這一點:懸停,以及通過點擊或活動實現這一點,你需要做兩件事:
.nav-link.active:before ,
.nav-link:active:before ,
.nav-link:hover:before ,
.nav-link:focus:before {
/*your same code here */
};
此外,此規則不正確:它指的是.nav-link類具有.active且用戶在元素上單擊(按住單擊) - 這就是:active表示。
.nav-link.active:active:在{...}之前
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.