时间戳

首页 > 解决方案 > 将 3d 文本旋转 javascript 文件转换为特定于角度组件的打字稿文件

javascript - 将 3d 文本旋转 javascript 文件转换为特定于角度组件的打字稿文件

问题描述

我有一个 javascript 文件，用于旋转 3d 格式的文本以转换为特定于角度组件的打字稿文件。相同的代码笔是 - https://codepen.io/jouanmarcel/pen/wxdqNq

我还提供了我的角度文件：

索引.html

<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>RotateText</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" crossorigin="anonymous">
 </head>
 <body>
  <app-root></app-root>
 </body>
</html>

样式.css

* {
margin: 0px !important;
padding: 0px !important;
box-sizing: border-box !important;
}

body {
font-family: "Roboto Mono" !important;
font-size: 50px !important;
padding: 50px 0 0 100px !important;
display: flex !important;
align-items: stretch !important;
flex-direction: column !important;
font-weight: 700 !important;
color: #fff !important;
background-image: radial-gradient(#e85e3c, #7c1717) !important;
background-repeat: no-repeat !important;
height: 100vh !important;
}

app.component.html

<router-outlet></router-outlet>

登陆.component.html

<div class="t3xts t3xt-1">NO!</div>
<div class="t3xts t3xt-2">THIS IS</div>
<div class="t3xts t3xt-3">PATRICK!</div><a class="ref" href="https://jouanmarcel.com" target="_blank"> Jouan Marcel</a>

登陆.component.css

.t3xts {
line-height: 1 !important;
position: relative !important;
perspective: 1000px !important;
text-transform: uppercase !important;
}

.t3xt {
transform-style: preserve-3d !important;
position: absolute !important;
top: 0 !important;
text-transform: uppercase !important;
}

.t3xt-out {
animation: text-out .5s ease !important;
}

.t3xt-in {
animation: text-in .5s ease !important;
}

@keyframes text-out {
to {
    transform: rotateX(90deg) !important;
    opacity: 0 !important;
}
}

@keyframes text-in {
from {
    opacity: 0 !important;
    transform: rotateX(-90deg) !important;
}

to {
    transform: rotateX(0deg) !important;
    opacity: 1 !important;
}
}

.ref {
background-color: #000 !important;
border-radius: 3px !important;
padding: 5px 8px !important;
position: absolute !important;
font-size: 16px !important;
bottom: 10px !important;
right: 10px !important;
color: #fff !important;
font-weight: 300 !important;
font-family: sans-serif !important;
text-decoration: none !important;
}

.ref::first-letter {
font-size: 12px !important;
}

Landing.component.ts（包含转换后的 javascript 代码的文件）

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-landing',
 templateUrl: './landing.component.html',
 styleUrls: ['./landing.component.css']
})
export class LandingComponent implements OnInit {

constructor() { }

ngOnInit() {
}

n3xt(text, element){
var sample = document.querySelector(element);
if (sample.dataset.animating === 'true') return;
var sampleH = 50; // will keep it fixed, otherwise sample.offsetHeight

var sampleT = sample.textContent; // old text

var sampleNT = text; // new text

sample.dataset.animating = 'true';
sample.style.height = sampleH + 'px'; // original text element

var samO = document.createElement('div');
samO.style.transformOrigin = '0 ' + sampleH / 2 + 'px -' + sampleH / 2 + 'px';
samO.classList.add('t3xt');
samO.textContent = sampleT; // new text element

var samN = samO.cloneNode();
samN.textContent = sampleNT;
sample.textContent = '';
sample.appendChild(samO);
sample.appendChild(samN);
samO.classList.add('t3xt-out');
samN.classList.add('t3xt-in');
samN.addEventListener('animationend', function (event) {
sample.removeChild(samO);
sample.removeChild(samN);
sample.textContent = sampleNT;
sample.dataset.animating = 'false';
});
}

var phraseIndex = 1;
var wordIndex = 0;
var t3xts = [["No!", "This is", "Patrick!"], ["I can't", "see my", "forehead"], ["Is mayonnaise", "an 
instrument?"], ["F stands", "for Fun", ""], ["I wumbo", "you wumbo", "he/she/me wumbo"], ["It may 
be", "stupid, but", "it's also dumb"], ["Moss always", "points to", "civilization"]]; // start it off

setTimeout(changetext, 200);

changetext() {
 if (wordIndex > 2) {
   wordIndex = 0;
   phraseIndex++;
} 

if (phraseIndex >= t3xts.length) {
phraseIndex = 0;
}

var term = t3xts[phraseIndex][wordIndex];
n3xt(term, '.t3xt-' + ++wordIndex);

if (wordIndex == 3) {
setTimeout(changetext, 2000);
} else {
setTimeout(changetext, 150);
}
}

}

animate.js（我要转换为landing.component.ts的代码）

function n3xt(text, element) {
var sample = document.querySelector(element);
if (sample.dataset.animating === 'true') return;
var sampleH = 50; // will keep it fixed, otherwise sample.offsetHeight

var sampleT = sample.textContent; // old text

var sampleNT = text; // new text

sample.dataset.animating = 'true';
sample.style.height = sampleH + 'px'; // original text element

var samO = document.createElement('div');
samO.style.transformOrigin = '0 ' + sampleH / 2 + 'px -' + sampleH / 2 + 'px';
samO.classList.add('t3xt');
samO.textContent = sampleT; // new text element

var samN = samO.cloneNode();
samN.textContent = sampleNT;
sample.textContent = '';
sample.appendChild(samO);
sample.appendChild(samN);
samO.classList.add('t3xt-out');
samN.classList.add('t3xt-in');
samN.addEventListener('animationend', function (event) {
sample.removeChild(samO);
sample.removeChild(samN);
sample.textContent = sampleNT;
sample.dataset.animating = 'false';
});
}

var phraseIndex = 1;
var wordIndex = 0;
var t3xts = [["No!", "This is", "Patrick!"], ["I can't", "see my", "forehead"], ["Is mayonnaise", "an 
instrument?"], ["F stands", "for Fun", ""], ["I wumbo", "you wumbo", "he/she/me wumbo"], ["It may 
be", "stupid, but", "it's also dumb"], ["Moss always", "points to", "civilization"]]; // start it off

setTimeout(changetext, 200);

function changetext() {
if (wordIndex > 2) {
wordIndex = 0;
phraseIndex++;
}

if (phraseIndex >= t3xts.length) {
phraseIndex = 0;
}

var term = t3xts[phraseIndex][wordIndex];
n3xt(term, '.t3xt-' + ++wordIndex);

if (wordIndex == 3) {
setTimeout(changetext, 2000);
} else {
setTimeout(changetext, 150);
}
}

谁能帮我将javascript代码转换为打字稿代码？

标签： javascripthtmlcssangulartypescript

解决方案

查看 stackblitz 示例Stackblitz

这就是我更新组件的方式

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'animation-container',
  templateUrl: './text-rotate.component.html',
  styleUrls: [ './text-rotate.component.css' ]
})
export class AnimationContainer implements OnInit {

 phraseIndex = 1;
  wordIndex = 0;
  t3xts = [
  ["No!", "This is", "Patrick!"],
  ["I can't", "see my", "forehead"],
  ["Is mayonnaise", "an instrument?"],
  ["F stands", "for Fun", ""],
  ["I wumbo", "you wumbo", "he/she/me wumbo"],
  ["It may be", "stupid, but", "it's also dumb"],
  ["Moss always", "points to", "civilization"]
];

n3xt(text, element) {
  let sample = document.querySelector(element);
  if (sample.dataset.animating === "true") return;
  let sampleH = 50; // will keep it fixed, otherwise sample.offsetHeight
  let sampleT = sample.textContent; // old text
  let sampleNT = text; // new text
  sample.dataset.animating = "true";
  sample.style.height = sampleH + "px";

  // original text element
  let samO = document.createElement("div");
  samO.style.transformOrigin = "0 " + sampleH / 2 + "px -" + sampleH / 2 + "px";
  samO.classList.add("t3xt");
  samO.textContent = sampleT;

  // new text element
  let samN = samO.cloneNode();
  samN.textContent = sampleNT;
  sample.textContent = "";
  sample.appendChild(samO);
  sample.appendChild(samN);

  samO.classList.add("t3xt-out");
  samN.classList.add("t3xt-in");

  samN.addEventListener("animationend", function(event) {
    sample.removeChild(samO);
    sample.removeChild(samN);
    sample.textContent = sampleNT;
    sample.dataset.animating = "false";
  });
}


  changetext(){
  if (this.wordIndex > 2) {
    this.wordIndex = 0;
    this.phraseIndex++;
  }
  if (this.phraseIndex >= this.t3xts.length) {
    this.phraseIndex = 0;
  }
  let term = this.t3xts[this.phraseIndex][this.wordIndex];
  this.n3xt(term, ".t3xt-" + ++this.wordIndex);

  if (this.wordIndex == 3) {
    setTimeout(()=>this.changetext(), 2000);
  } else {
    setTimeout(()=>this.changetext(), 150);
  }
}
ngOnInit(){
  setTimeout(()=>this.changetext(), 200);
}
}

推荐阅读