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

Posted 2023-03-06

【中文标题】CSS：如何从函数中传递动画时间和`@keyframe`值？

【英文标题】：CSS : How to pass animation time and `@keyframe` values from function?

【发布时间】：2020-10-28 12:26:42

【问题描述】：

我在 Angular 中工作，我正在为文本提供动画。 但是这里我想为动画设置动态时间。

例如：这里我在CSS 中创建了类.slide-in-top 并将动画时间设置为1.3s 但我想从函数addAnimation() 中设置它，就像我想设置它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>

【问题讨论】：

你用的是css还是scss？

@mayurkukadiya 我正在使用css

你为什么不使用这样的东西？ var time=5; $("#user_text").addClass('slide-in-top').css('animation-duration':time+'s');

@RohitTagadiya，对于@keyframes 的设置值，请访问***.com/questions/10342494/…。跳它帮助。

【参考方案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>

【参考方案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>

【参考方案3】：

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

试试下面的

动画文本.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