javascriptを使って幅を適用すると、CSSをトランジションする方法を教えてください。

私はtelerikコントロールを使って簡単なフォームを作成しています。javascriptを使って幅を適用すると、CSSをトランジションする方法を教えてください。

フォームには3つのボタンがあります。他のボタン

第一及び第二のボタン

100ドルボタン
50ドルボタン
実際RadButtons
```
<telerik:RadButton ID="Donate100" runat="server" Text="$100" Width="70" CssClass="" Visible="true" OnClick="Donate100_Click"></telerik:RadButton> 
    <telerik:RadButton ID="Donate50" runat="server" Text="$50" Width="70" CssClass="" Visible="true" OnClick="Donate50_Click"></telerik:RadButton> 
```
であり、第三の 'ボタン' は単にANありますボタンのように見える入力ボックス
```
<telerik:RadNumericTextBox ID="Other" Width="70" runat="server" Type="Currency" DisplayText="Other" Visible="true" OnTextChanged="Other_TextChanged"> 
    <ClientEvents OnFocus="Focus" /> 
</telerik:RadNumericTextBox> 
```
ユーザーが「他のボタン」にフォーカスすると、ボタンの幅を広げるjavascript関数が呼び出されます。
```
<script type="text/javascript"> 
    function Focus(sender, eventArgs) { 

     document.getElementById("Other_wrapper").style.width = "400px"; 
    } 
</script> 
```
これは完全に機能します。私が紛失している唯一のことは、移行を行う方法です。短い70pxから400pxへの移行には1.5秒かかると思います。

これはCSSクラスを切り替えることで行う必要がありますか？ javascriptで手動で幅を設定する代わりに？または私は何とか私のjavascript関数にtransistionを追加することができます。後者は理想的です。

2016-08-24 onTheInternet

CSSで 'transition：width 1.5s ease'を試しましたか？ – Scott

Javascriptだけで可能です。しかし、保守性の問題のために推奨されていません。

var wrapper = document.getElementById("Other_wrapper"); 
wrapper.style.transition = 'width 1.5s ease'; 
wrapper.style.width = '70px'; 

function Focus(sender, eventArgs) { 
    wrapper.style.width = "400px"; 
}

CSSを使用したスタイルの使用が推奨されます。

//CSS 
#Other_wrapper { 
    width: 70px; 
    transition: width 1.5s ease; 
} 
.expand { 
    width: 400px; 
} 
//JS 
function Focus(sender, eventArgs) { 
    document.getElementById("Other_wrapper").className += " expand"; 
}

出典

2016-08-24 15:13:18 Lewis

まさに私が必要としたもの。ありがとうございました。 – onTheInternet

は、私はあなたが、たとえば、CSS3のトランジションを追加したいと思います。ところで

#Other { 
    transition: width 1.5s; 
}

：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ 
 
    transition: width 2s; 
 
} 
 

 
div:hover { 
 
    width: 300px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> 
 

 
<div></div> 
 

 
<p>Hover over the div element above, to see the transition effect.</p> 
 

 
</body> 
 
</html>

出典

2016-08-24 14:58:58 barha

あなたはアニメーションを取得するには、単純なCSS3トランジションを使用することができます。すべての現在のブラウザがこの動作をサポートしているので、-webkitやそれに類する接頭辞は必要ありません。http://caniuse.com/#feat=css-transitions

ヒント：JSのみテキストボックスのサイズを変更するために使用されている場合は

、あなたはまた、JS「のonFocus」ハンドラを削除することができ、代わりに純粋なCSSを使用します。

#Other { 
    width: 70px; 
    transition: width 1.5s; 
} 
#Other:focus { 
    width: 400px; 
}

出典

2016-08-24 14:59:33 Philipp

javascriptを使って幅を適用すると、CSSをトランジションする方法を教えてください。

答えて

関連する問題