Question

在{N}中，我可以为image backgroundPosition设置动画吗？

认为答案是否定的。

在这种情况下，任何人都尝试使用setInterval()或类似的东西来制作动画 - 这会起作用吗（看起来相对顺畅）？

Answer 1

你试过这个吗？

.thing{
    display:block;
    height:300px;
    width:300px;
    background:url('http://4.bp.blogspot.com/-WeXXx2gmVlY/VNiy484uYoI/AAAAAAAAAsU/XeTgzY9k-Us/s1600/Gambar-Keren-Unik-DP-BBM-Terbaru9.jpg') no-repeat;
    background-position:-300px;
    border:1px solid grey;
    -webkit-transition:background-position 1s ease;
}

.thing:hover{
    background-position:0px;
    color:red;
}

http://jsfiddle.net/hfXSs/882/ 你应该更具特色

Answer 2

{N} + Angular2你可以这样做：

在HTML中：

<StackLayout class="bg" [style]="'background-position:'+translateValue+'  
'+translateValue+';'">
    <Label [text]="translateValue"></Label>
<StackLayout>

在CSS中：

.bg {
    background-image: url("res://bg");
    background-size: cover;
    background-repeat: repeat;
}

在some.component中：

export class SomeComponent implements OnInit {
  public translateValue:number = 0;
  constructor() {
      setInterval(()=>{
        this.translateValue++;
      },50);
  }
}

我知道这不是一个好的解决方案，但它确实有用。

在{N}中，我可以为图像backgroundPosition设置动画吗？

2 个答案: