CSS : 如何从函数传递动画时间和 `@keyframe` 值？

Question

我在 angular 工作，我正在为文本添加动画。
但是这里我想给动画设置动态时间

例如：这里我在 CSS 中创建了 class .slide-in-top 并将动画时间设置为 1.3s 但我想从函数 [=17= 中设置它]喜欢如果我想设置它2, 3 or 4 seconds，我想。

而且我还想设置 keyframes 当前设置的值 transform: translateY(-40px) 这里 -40px 我已经设置了静态但我想从 addAnimation() 函数设置它正如我想要的 -30px or-50px 等等

addAnimation();

function addAnimation(){
 $("#user_text").addClass('slide-in-top');
}

.slide-in-top {
  -webkit-animation: slide-in-top 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-in-top 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="margin-top: 20px; background:#0095ff;height:100px;padding:20px">
  <p id="user_text">This is Animated text</p>
</div>

Answer 1

希望这就是您所期待的。

使用 setParameters('1.3s','-50px') 函数，您可以动态设置动画持续时间和关键帧值变换属性。

function addAnimation(animationName,animationStyles){

 let styleElement = document.createElement('style');
 styleElement.type='text/css';
 document.head.appendChild(styleElement); 
 let styleElementSheet = styleElement.sheet;
 styleElementSheet.insertRule(`@keyframes ${animationName}{
 ${animationStyles} }`,styleElement.length);
 
 styleElementSheet.insertRule(`@-webkit-keyframes ${animationName}{
 ${animationStyles} }`,styleElement.length);
}

function setParameters(animDuration,translate){
 $("#user_text").addClass('slide-in-top');
document.getElementsByClassName('slide-in-top')[0].style.animation = `slide-in-top ${animDuration} cubic-bezier(0.250, 0.460, 0.450, 0.940) both`;


addAnimation('slide-in-top', `
  0% {
    -webkit-transform: translateY(${translate});
    transform: translateY(${translate});
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
`);
}
setParameters('1.3s','-50px'); //change this based on u r requirements

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="margin-top: 20px; background:#0095ff;height:100px;padding:20px">
  <p id="user_text">This is Animated text</p>
</div>

Answer 2

你可以这样写代码

function addAnimation(from, to){
  $( "#user_text" ).css('margin-top', from);
  $( "#user_text" ).css('opacity', '0');
  $( "#user_text" ).animate({
      "margin-top": to,
      "opacity": 1
    }, 1500 );
}

addAnimation("-30px", "0px");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="margin-top: 20px; background:#0095ff;height:100px;padding:20px">
  <p id="user_text">This is Animated text</p>
</div>

Answer 3

尽量避免混用 JQuery 和 Angular。这可能会导致潜在的问题扩大。相反，您可以尝试使用 Angular animations。您可以使用插值绑定传递动态值。

尝试以下方法

动画-text.component.ts

import { Component, Input } from '@angular/core';
import { state, trigger, style, animate, transition, keyframes } from '@angular/animations';

@Component({
  selector: 'animate-text',
  template: `
  <div style="margin-bottom: 20px; background:#0095ff;height:100px;padding:20px">
    <p *ngIf="show" [@keyframes]="{value: '', params: {duration: duration, translateStart: translateStart}}">This is Animated text</p>
  </div>
  `,
  animations: [
    trigger('keyframes',[
      transition('void => *', [
        animate('{{ duration }} cubic-bezier(0.250, 0.460, 0.450, 0.940)', keyframes([ 
          style({opacity: 0, transform: 'translateY({{ translateStart }})'}), 
          style({opacity: 1, transform: 'translateY(0px)'})
        ])),
      ])      
    ])
  ]
})
export class AnimateText {
  @Input() duration: string = '1.3s';
  @Input() translateStart: string = '-40px';
  show: boolean = true;

  onMouseUp() {
    this.show = !this.show;
  }
}

app.component.ts

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

@Component({
  selector: 'my-app',
  template: `
  Default (duration: 1.3s, translateY: -40px):
  <animate-text></animate-text>

  duration: 3s, translateY: -30px:
  <animate-text duration='3s' translateStart='-30px'></animate-text>

  duration: 10s, translateY: 80px:
  <animate-text duration='10s' translateStart='80px'></animate-text>
  `
})
export class AppComponent {
}

我已经让 animate-text.component.ts 接受两个输入 duration 和 translateStart。它们充当动画持续时间的动态值和关键帧 1 处的 translateY 值。

使用绑定到动画属性 [@keyframes]="{value: '', params: {duration: duration, translateStart: translateStart}}" 的值的 params 属性将值传递给动画定义。注意在动画定义中使用插值来使用值

持续时间 - animate('{{ duration }} cubic-bezier(0.250, 0.460, 0.450, 0.940)
翻译开始 - style({opacity: 0, transform: 'translateY({{ translateStart }})'})

工作示例：Stackblitz

CSS : 如何从函数传递动画时间和 `@keyframe` 值？

CSS : How to pass animation time and `@keyframe` values from function?

html

css

animation

keyframe

angular