ボタンへのトランジション効果を追加していません

-1

ボタンにtransition効果を追加しましたが、効果がありません。背景色は白です。トランジションエフェクトを追加することで、色を下から上に移動する必要がありますが、効果はありません。ここにはfiddle linkがあります。ボタンへのトランジション効果を追加していません

.hourlypricing { 
 
    background: #57c1e8; 
 
    border: .2rem solid #57c1e8; 
 
    min-width: 16.5rem; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 6rem; 
 
    margin-left: 265px; 
 
    line-height: 5.6rem; 
 
    text-transform: uppercase; 
 
    letter-spacing: .1em; 
 
    white-space: nowrap; 
 
    font-size: 1.4rem; 
 
    padding: 0 2.5rem; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
    text-decoration: none !important; 
 
    -webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out; 
 
    transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out; 
 
} 
 

 
button.monthlypricing { 
 
    margin-left: 50px; 
 
    background: #fff; 
 
    border: .2rem solid #57c1e8; 
 
    min-width: 16.5rem; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 6rem; 
 
    line-height: 5.6rem; 
 
    text-transform: uppercase; 
 
    letter-spacing: .1em; 
 
    white-space: nowrap; 
 
    font-size: 1.4rem; 
 
    padding: 0 2.5rem; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
    color: #000; 
 
    text-decoration: none !important; 
 
    -webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out; 
 
    transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out; 
 
}

<div class="hourly"> 
 
    <button class="hourlypricing">Hourly Pricing</button> 
 
    <span class="FyfR" data-reactid="5">or</span> 
 
    <button class="monthlypricing">Monthly Pricing</button> 
 
</div>

出典

2017-10-05 user8725518

_When_は、遷移が発生すべきか？あなたはそれを指定しなかった。 – Xufox

多分あなたはアニメーションをしたいですか？ –

@Xufoxユーザーが月額料金設定のときに背景色を変更し、色を下から上に移動する必要があります – user8725518

を使用するとおよびtransform-origin。参照のために下のスニペットを確認してください。

.hourlypricing { 
 
    background: #57c1e8; 
 
    border: .2rem solid #57c1e8; 
 
    min-width: 16.5rem; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 6rem; 
 
    margin-left: 265px; 
 
    line-height: 5.6rem; 
 
    text-transform: uppercase; 
 
    letter-spacing: .1em; 
 
    white-space: nowrap; 
 
    font-size: 1.4rem; 
 
    padding: 0 2.5rem; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
    text-decoration: none !important; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.hourlypricing:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
    transition: transform 1s; 
 
    transform-origin: top center; 
 
    transform: scaleY(0); 
 
    z-index: -1; 
 
} 
 

 
.hourlypricing:hover:after { 
 
    transform: scaleY(1); 
 
} 
 

 
button.monthlypricing { 
 
    margin-left: 50px; 
 
    background: #fff; 
 
    border: .2rem solid #57c1e8; 
 
    min-width: 16.5rem; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 6rem; 
 
    line-height: 5.6rem; 
 
    text-transform: uppercase; 
 
    letter-spacing: .1em; 
 
    white-space: nowrap; 
 
    font-size: 1.4rem; 
 
    padding: 0 2.5rem; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
    color: #000; 
 
    text-decoration: none !important; 
 
    -webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out; 
 
    transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out; 
 
}

<div class="hourly"> 
 
    <button class="hourlypricing">Hourly Pricing</button> 
 
    <span class="FyfR" data-reactid="5">or</span> 
 
    <button class="monthlypricing">Monthly Pricing</button> 
 
</div>

更新： Activate]ボタンの場合は、スクリプトを使用する必要があります。参照のために下のスニペットを確認してください。

$('button').click(function() { 
 
    $('button').removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

button.active { 
 
    background: #57c1e8 !important; 
 
} 
 

 
button:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
    transition: transform 1s; 
 
    transform-origin: top center; 
 
    transform: scaleY(0); 
 
    z-index: -1; 
 
} 
 

 
button:hover:after { 
 
    transform: scaleY(1); 
 
} 
 

 
button.active:hover:after { 
 
    transform: scaleY(0); 
 
} 
 

 
button { 
 
    background: #fff; 
 
    border: .2rem solid #57c1e8; 
 
    min-width: 16.5rem; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 6rem; 
 
    line-height: 5.6rem; 
 
    text-transform: uppercase; 
 
    letter-spacing: .1em; 
 
    white-space: nowrap; 
 
    font-size: 1.4rem; 
 
    padding: 0 2.5rem; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
    color: #000; 
 
    text-decoration: none !important; 
 
    -webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out; 
 
    transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
button.monthlypricing { 
 
    margin-left: 50px; 
 
} 
 

 
button.hourlypricing { 
 
    margin-left: 265px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hourly"> 
 
    <button class="hourlypricing active">Hourly Pricing</button> 
 
    <span class="FyfR" data-reactid="5">or</span> 
 
    <button class="monthlypricing">Monthly Pricing</button> 
 
</div>

出典

2017-10-05 16:05:19

-1

あなたは

https://www.w3schools.com/css/css3_transitions.asp

CSSトランジションを使用すると、別の値からスムーズにプロパティ値を変更することができます任意の値を変更しない：これは、コードです。（また、私はより良い可視性のために1秒までのトランジションの時間を設定している）、このような独立したセクション.hourlypricing:hoverに

.hourlypricing { 
 
    background: #57c1e8; 
 
    transition: background-color .1s ease-in-out; 
 
} 
 

 
.hourlypricing:hover { 
 
    background: red; 
 
}

出典

2017-10-05 10:29:02 jtrolle

スニペットを追加するときに完全なコードを入力する必要があります。代わりに**コード**タグを使用してください –

実行コードスニペットをクリックすると結果が表示されません – user8725518

@ user8725518もちろんです。スニペットにはHTMLは含まれていませんが、あなたに役立つCSSがいくつか含まれています。 – Xufox

移動遷移定義：

.hourlypricing 
 
\t { 
 
    background: #57c1e8; 
 
    border: .2rem solid #57c1e8; 
 
    min-width: 16.5rem; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 6rem; 
 
\t margin-left:265px; 
 
    line-height: 5.6rem; 
 
    text-transform: uppercase; 
 
    letter-spacing: .1em; 
 
    white-space: nowrap; 
 
    font-size: 1.4rem; 
 
    padding: 0 2.5rem; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
    text-decoration: none !important;} 
 
    
 
.hourlypricing:hover {  
 
\t -webkit-transition: background-color .1s ease-in-out,color .1s ease-in-out,-webkit-box-shadow .1s ease-in-out; 
 
    transition: background-color 1s ease-in-out,color 1s ease-in-out,box-shadow 1s ease-in-out; 
 
    background-color: red; 
 
    } 
 
    
 
\t button.monthlypricing 
 
\t { 
 
    margin-left: 50px; 
 
\t background:#fff; 
 
\t border: .2rem solid #57c1e8; 
 
    min-width: 16.5rem; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 6rem; 
 
\t line-height: 5.6rem; 
 
    text-transform: uppercase; 
 
    letter-spacing: .1em; 
 
    white-space: nowrap; 
 
    font-size: 1.4rem; 
 
    padding: 0 2.5rem; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
\t color:#000; 
 
    text-decoration: none !important; 
 
\t -webkit-transition: background-color .1s ease-in-out,color .1s ease-in-out,-webkit-box-shadow .1s ease-in-out; 
 
    transition: background-color .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out; 
 
    }

<div class="hourly">       \t \t 
 
\t \t \t \t \t \t <button class="hourlypricing">Hourly Pricing</button> 
 
\t \t \t \t \t \t <span class="FyfR" data-reactid="5">or</span> 
 
\t \t \t \t \t \t <button class="monthlypricing">Monthly Pricing</button> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t 
 
\t \t \t \t </div>

出典

2017-10-05 12:12:50

トランジション効果は下から上に移動する必要があります – user8725518

ボタンへのトランジション効果を追加していません

答えて

関連する問題