首页 文章

如何在角度按钮点击上设置margin-left？

提问于
浏览 次
1

我使用 animate 函数和 margin-left 在jquery中创建了一个滑块 .

请检查我的jquery代码https://jsfiddle.net/uvsb6asa/10/

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

  }

我想在角度4中使用相同的功能 . 我可以在按钮点击时添加淡入和淡出动画 . 但是如何在按钮点击中设置 left to right 的左边距或滑动效果

这是我的代码

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")])
  ])]
})
javascript angular

1 回答

  • 1

    您可以尝试使用“变换”而不是“不透明度”

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

    我认为这段代码类似于你的jquery效果

    animations: [trigger("move", [
  transition(':enter', [
    animate(500, style({ transform: 'translateX(-100%)' }))
  ]),
  transition(':leave', [
    animate(500, style({ transform: 'translateX(-100%)' }))
  ])
])]
    回复于

相关问题