Html 离子液体中的马奎尔效应

我试图在爱奥尼亚中获得一种类似字幕的效果，文本在屏幕上自动滚动。它在网络模拟器上运行平稳，但一旦我加载到iPhone上，自动滚动就会变得非常不平稳。我想知道是否有修复程序，或者是否有支持类似功能的本机ionic组件

目前，我只是简单地使用了marquee标签，我知道它已经被弃用了，但我找不到替代品。我看过有人制作的爱奥尼亚字幕插件，但它只支持文本，而我滚动的不仅仅是文本。将Angular与typescript一起使用时，最好不要使用jQuery

谢谢你的帮助

<div class = "example1">
        <div class = "horizontalWSpace">
              <div  *ngFor ="let category of categories">
                  <h3 (click)="searchKeyword(category)" >{{category}} </h3>
            </div>
          </div>
      </div>

我从中找到解决办法

爱奥尼亚帐篷 npm安装爱奥尼亚字幕——保存

@NgModule({
...
进口：[
IonMarquee模块，
...
],
...
})
导出类AppModule{}
=======================================
导出类YourPage实现OnInit{
horizontalText=`这是显示水平滚动的文本，
默认为水平滚动，不需要设置方向`；
构造函数（公共navCtrl:NavController）{}
恩戈尼尼特（）{
设置超时（（）=>{
this.horizontalText=`这是显示可以刷新文本的文本。
但此功能仅支持水平滚动！`；
}, 5000);
}
}
======================

您能否分享您尝试的自定义“字幕”代码的代码示例？。我在示例页面上看到

标记。试试看，也许它可以处理div。@shadoe2020我试过使用它，但它只允许垂直动画，而我希望它在整个页面上是水平的。@Claudiu我已经为自定义CSS动画添加了代码，但它似乎不起作用，因为它只是将ngFor的所有部分捆绑在一起，而没有单独设置动画。@sanchg我想你可能已经尝试通过手动操作循环中的定位来设置位置动画，而不是通过变换来解释其波动性。当我有时间的时候，我会尝试重新编程，看看发生了什么，但它肯定可以用CSS单独修复。

.horizontalWSpace {
  display: flex;
  justify-content: space-between;
  margin-top:20px;
}

.example1 {
  height: 50px; 
  overflow: hidden;
  position: relative;
 }
 .example1 h3 {
  color: white;
  background-color:black;
  padding-left:12px;
  padding-right: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
  margin: 5px;

  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  /* Starting position */
  -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%);   
  transform:translateX(100%);
  /* Apply animation to this element */ 
  -moz-animation: example1 5s linear infinite;
  -webkit-animation: example1 5s linear infinite;
  animation: example1 5s linear infinite;
 }
 /* Move it (define the animation) */
 @-moz-keyframes example1 {
  0%   { -moz-transform: translateX(100%); }
  100% { -moz-transform: translateX(-100%); }
 }
 @-webkit-keyframes example1 {
  0%   { -webkit-transform: translateX(100%); }
  100% { -webkit-transform: translateX(-100%); }
 }

    @NgModule({
     ...
     imports: [
       IonMarqueeModule,
       ...
     ],
     ...
    })
    export class AppModule {}


    =======================================
    export class YourPage implements OnInit {
      horizontalText = `this is the text to show scroll horizontal, 
      and default is scroll horizontal. you don't need to set the direction`;
      constructor(public navCtrl: NavController) {}

      ngOnInit() {
        setTimeout(() => {
          this.horizontalText = `this is the text to show that text could be refreshed. 
          but this feature support horizontal scroll only!`;
        }, 5000);
      }
    }

======================

      <ion-marquee speed="30" style="height: 24px" [text]="horizontalText">
      </ion-marquee>