首页 文章

如何使用angular2 / 4安装或集成typed.js？

提问于
浏览 次
0

我试图将typed.js集成到角度两个但它不起作用 . 文字显得不错，但没有动画 . 我已经安装了jQuery和typed.js但是动画仍然无法正常工作 .

import { Component } from '@angular/core';
import { Typed } from 'typed.js';
import * as $ from 'jquery/dist/jquery.min.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public ngOninit() {
    var options = {
    stringsElement: "#typed-strings",
    typeSpeed: 80,
    backDelay: 700,
    backSpeed: 100,
    showCursor: true,
    autoInsertCss: false,
    cursorChar: '|',
    loop: true,
    loopcount: Infinity,    
    shuffle: true,
    }

    var typed = new Typed("#typing", options);
  }
}

div id="typed-strings" >
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<span id="typing"></span>

.angular-cli.json导入

"scripts": [
        "../node_modules/typed.js/lib/typed.min.js",
        "../node_modules/jquery/dist/jquery.min.js"
      ],
angular typed.js

2 回答

  • 3

    用 npm install typed.js 安装后

    ngOnInit() {
    let options = {
      strings: ["Product ", "Web ", "UX/UI"],
      typeSpeed:200,
      backSpeed:10,
      showCursor: true,
      cursorChar: "",
      loop:true
    }

    let typed = new Typed(".typing-element", options);
  }

    在html中你只需要添加这个类

    <h1 class="typing-element"></h1>
    回复于
  • 0

    试试这个：

    "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/typed.js/lib/typed.min.js"
      ],

    在进口方面，订单很重要

    回复于

相关问题