

Boxの横幅を 0％50pxから入力した値に変化させるというアニメーションを作成したいのですが  
取得した入力値をkeyframeのパラメーターをして設定する方法がわかりません。

こちらがHTMLです。

[code]

    <dl>
    <dt>0%</dt><dd>50px</dd>
    <dt>100%</dt><dd><input type="text" name="w100" id="w100" size="5">px</dd>
    </dl>
    <input type="button" value="Set" onclick="set();">
    </form>
    <div class="box"></div>
    
[/code]

書きかけのjqueryです。取得した値をkeyframeの100%のwidthにどのように入れいればよいのかご教授ください。

[code]

    function set(){
    var a=$("#w100").val();         //valueの取得
    var b=a+"px";                   //単位をつける        
    $("div").addClass("c"); 
    }
    
[/code]

下記のCSSは入力値が200をしたときのものです。

[code]

    <style>
    .box{   margin:10px; padding:0;  height:50px; background:#fcc;
    animation-name:anim;
    animation-duration:3s;
    animation-timin-function:ease-in;
    animation-delay:1s;
    animation-fill-mode:both;
    -webkit-animation:a 3s ease-in 1s both;
    }
    .c{
    @keyframes anim {
             0%     {height:50px; width:50px; } 
             100%   {height:50px; width:200px; }
    } 
    }
    </style>
    
[/code]


CC BY-SA 3.0
2015-04-21T16:20:04.520
9408
2015-04-22T09:18:45.857
2015-04-21T23:59:09.763
3371
9422
question
javascript jquery css
keyframe,animation のパラメーターをinputtypeから設定したい


[jQuery.KeyFrames](https://github.com/jQueryKeyframes/jQuery.Keyframes)プラグインの`$.keyframe.define()`とのメソッドで、下記のようにkeyframeのパラメーターを定義できます。

※下の「スニペットを実行」とのボタンをクリックしたら、結果も確認できます。

[code]

    function set() {
      var width = $("#w100").val();
      var animationName = 'anim_' + width;
    
      $.keyframe.define([{
        name: animationName,
        '0%': {
          'height': '50px',
          'width': '50px'
        },
        '100%': {
          'height': '50px',
          'width': width + 'px'
        }
      }]);
      
      $(".box").playKeyframe({
        name: animationName,
        duration: '3s',
        timingFunction: 'ease-in',
        delay: '1s',
        fillMode: 'both'
    });
    }
[/code]

[code]

    .box {
      margin: 10px;
      padding: 0;
      height: 50px;
      background: #fcc;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/jQueryKeyframes/jQuery.Keyframes/master/jquery.keyframes.min.js"></script>
    <dl>
      <dt>0%</dt>
      <dd>50px</dd>
      <dt>100%</dt>
      <dd>
        <input type="text" name="w100" id="w100" size="5" value="400">px</dd>
    </dl>
    <input type="button" value="Set" onclick="set();">
    </form>
    <div class="box"></div>
[/code]


CC BY-SA 3.0
2015-04-21T23:34:20.627
9418
2015-04-22T09:18:45.857
2015-04-22T09:18:45.857
3371
3371
9408
answer