how to set margin-left on button click in angular?

问题: I make a slider in jquery using animate function and margin-left. please check my jquery code https://jsfiddle.net/uvsb6asa/10/ function addToMarginLeft(elem, pixels)...

问题:

I make a slider in jquery using animate function and margin-left.

please check my jquery code https://jsfiddle.net/uvsb6asa/10/

 function addToMarginLeft(elem, pixels) {
    var ml = parseFloat(elem.css('margin-left'));
    elem.animate({
    'margin-left': (ml + pixels) + 'px'
    },1000)

  }

I want to make same functionality in angular 4 . I am able to add fade in and fade out animation on button click . but how I will set margin-left or sliding effect from left to right in button click

here is my code

https://stackblitz.com/edit/angular-slider-animation-ztr63u?file=src/app/app.component.ts

animations: [trigger("fade", [
  state("void", style({ opacity: 0 })),
  transition("void <=> *", [animate("0.5s ease-in-out")])
  ])]
})

回答1:

You can try to play with "transform" instead of "opacity"

animations: [trigger("move", [
 state("void", style({ transform: 'translateX(-100%)' })),
 transition("void => *", [animate("0.5s ease-in-out")])
])]

I think this code is similar to your jquery effect

animations: [trigger("move", [
  transition(':enter', [
    animate(500, style({ transform: 'translateX(-100%)' }))
  ]),
  transition(':leave', [
    animate(500, style({ transform: 'translateX(-100%)' }))
  ])
])]
  • 发表于 2018-07-10 18:59
  • 阅读 ( 296 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除