39798


Angular4にて画像をX軸上に移動するようにしてみました。

ボタンを押したら、一時停止や、逆に動くようにしてみたいと思うのですが、  
どのようにスタイルを切り替えていいのかがわかりません…。  
なにかアドバイスをいただけると助かります。

◆CSS

[code]

    .wrap {
      overflow: hidden;
    }     
    
    .sliding {
      background: url('../assets/test.png') repeat-x;
      height: 500px;
      width: 3384px;
      animation: slide 60s linear infinite;
    }
    
    @keyframes slide{
      0%{
        transform: translate3d(0, 0, 0);
      }
      100%{
        transform: translate3d(-1692px, 0, 0);
      }
    }
    
[/code]

◆HTML

[code]

    <div class="wrap">
        <div class="sliding">
    </div>
    
[/code]


CC BY-SA 3.0
2017-11-19T10:17:13.890
39691
2017-11-29T11:18:18.827
2017-11-24T06:12:35.340
19716
12842
question
css html5 angular4
Angular4で画像移動を止める


ngStyleを使用することで実現できるかと思います。

◆HTML

[code]

    <div class="wrap">
        <div class="sliding" [ngStyle]="testStyle[kind]">
    </div>
    
[/code]

◆ts

[code]

    testStyle[]=[     // 切り替えたい部分のstyleを記載
      {'animation':'none'},
      {'animation':'slide_left 60s linear infinite'},
      {'animation':'slide_right 60s linear infinite'},
      ....
    ];
    ...
    kind=0; //<button>の(click)等でこの値を変える
    
[/code]


CC BY-SA 3.0
2017-11-24T06:15:42.247
39798
2017-11-29T11:18:18.827
2017-11-29T11:18:18.827
19716
19716
39691
answer