js控制css中的帧动画, 使动画每点击一次运行一次

通过JavaScript调用CSS动画 通过JavaScript调用CSS动画案例一:通过按钮开始和停止动画案例二:通过定时器停止动画 案例一:通过按钮开始和停止动画 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .animation { animation: move 2s infinite alternate; bor 阅读详情

今天在模拟右侧栏向左滑出时,发现动画只会起作用一次,最后解决了~如下图


解决思路是:动态添加class。

  • css
.moveAnimation{
	animation:mymove 1s;	
}

@keyframes mymove /*Safari and Chrome*/
{
	from {right:-400px;}
	to {right:0px;}
}
  • js(用的是react,动态添加class核心不变)
//根据state动态改变clss	moveAnimation	 
let popClassNames=classnames({
	[styles["pop-area"]]:true,
	[styles["help-area"]]:!defaultProps.isPopup,
	[styles["moveAnimation"]]:this.state.isShow,			
})

//...省略其他代码

//引用class
<div className={popClassNames} >
	//...省略其他代码
</div>

帧动画的多种实现方式与性能对比 概述 前面我分享了《Web动画形式》,各种动画形式都可以制作出一种类型的动画,那就是帧动画,也叫序列帧动画,定格动画,逐帧动画等,这里我们统一用帧动画来表述,接下来我们就来看看帧动画有哪些打开方式吧。 (高兴的小伙子) 应用场景 帧动画一般用来实现稍微复杂一点的动画效果,同时希望动画更细腻,设计师更自由的发挥。他可以定义到每一个时间刻度上的展现内容,我们一般用帧动画来做页面的Loadi... 阅读详情

相关推荐

CSS动画和JS动画对比

在工作中,经常会写点动画效果,常用的方式有CSS动画还有JS动画,根据项目的需求,采用的方案各不相同,但是两者实现的性能分析没有进行对比。总结网上相关资料,在这里简单整理下 本文主要讲以下这些内容 1、浏览器渲染流程 2、回流和重绘 3、CSS 动画 4、JS 动画 两者对比 ???? 1. 浏览器的渲染流程 渲染流程主要有4个步骤 解析 HTML 生成DOM 树 解析 CSS 样式生成 CSSOM 树,CSSOM 树与 DOM 树结合生成 Render tree 布局 Render Tree 对每个节点进

weixin_36106791的博客 2370

小程序动画加载只执行一次的问题

问题 最近, 想做个小程序的圆盘抽奖出来, 想要实现的效果是点击一次就旋转一次. 不过每次只有第一次点击有效, 再次点击就没有任何动画效果. 代码如下 rotate: function() { // 创建一个动画实例 var animation = wx.createAnimation({ duration: 1000, timingFunction:...

liujiawei159的博客 6052

CSS3动画开发指南之逐帧动画

最近在公司开发的项目中需要用到多个图片逐帧动画的效果,参考了他人的博客,在这里写出来记录一下(主要是我对自己转头就马什么梅的记忆力没信心) 什么是逐帧动画 维基百科中的定义:        定格动画,又名逐帧动画,是一种动画技术,其原理即将每帧不同的图像连续播放,从而产生动画效果。 简而言之,实现逐帧动画需要两个条件:(1)相关联的不同图像,即动画帧;(2)连续播放。   了解了什么是逐帧...

AwsuEver 837

冷门API,JS控制css动画——前端动画的一种方式

实验性API ,Animation,使用js来控制CSS动画

qq_42780885的博客 1635

JS动画 与 CSS3动画 及 回流和重绘

文章目录JS动画CSS3动画浏览器的渲染流程回流(重排) 和 重绘 JS动画 JS动画:也被称为 逐帧动画,在时间帧上绘制内容,一帧一帧的,所以它的可再造性很高,几乎可以完成任何想要的动画形式。 缺点: 有可能造成丢帧的情况。JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞,从而造成丢帧。 代码的复杂度高于CSS动画。 优点: JavaScript动画控制能力很强,可以在动画播放过程中对动画进行控

YuLong的博客 2378

使用JavaScript控制CSS3关键帧动画

在网页开发中,CSS3关键帧动画是一种强大的工具,可以创建各种各样的动画效果。通过JavaScript,我们可以动态地控制CSS3关键帧动画,实现更加复杂和交互性的动画效果。通过这些方法,我们可以在JavaScript中实现对CSS3关键帧动画的控制和修改。在上面的代码中,我们定义了一个类名为"box"的div元素,并为它添加了一个CSS动画。首先,让我们创建一个简单的HTML页面,其中包含一个带有动画效果的元素。例如,我们可以通过改变关键帧的颜色值,来实现动画颜色的变化。要改变动画的速度,我们可以使用。

CodeWhizZ的博客 562

使用JavaScript控制CSS Animations(动画)

当你想在动画执行过程中暂停,并且接下来让动画接着执行。这时CSS的animation-play-state属性是非常有用的。

Zeb的博客 1535

js条件下多次触发同一个css3动画的解决方案demo

js条件下多次触发同一个css3动画的解决方案demo,配合blog一起使用。js条件下多次触发同一个css3动画的解决方案demo,配合blog一起使用。

为什么 CSS 动画比 JavaScript 高效?

大家好,我是小丞同学,一名准大二的前端爱好者 这篇文章将欢快的带你了解一下 CSS 和 JS 动画的差别 愿你忠于自己,热爱生活 引言 讲到动画,当然是非常有意思的啦,你可以往上滑一下,看看上面的封面图,是不是相当的炫酷,以为我是代码写出来的吗? 那当然不可能啊,我这么摸鱼,怎么会为了个封面图上号呢 废话不多说,其实上面的动图用代码实现也不会很困难,这个图是用 canva 做出来的。 本文主要讲以下这些内容 浏览器渲染流程 回流和重绘 CSS 动画 JS 动画 两者对比

小丞同学 7442

告别手动点鼠标:用Python脚本批量跑ADS版图仿真,效率提升10倍(附完整代码)

本文详细介绍了如何利用Python脚本自动化ADS版图仿真流程,显著提升射频工程师的工作效率。通过调用ADS底层接口,实现参数化修改、批量任务调度和结果自动收集,解决了手动操作中的常见问题,如仿真不更新等。附完整代码,帮助开发者快速实现10倍效率提升。

weixin_42523543的博客 331

Mplus实战:如何用交叉滞后面板模型(CLPM)分析心理学纵向数据?

本文提供了在Mplus软件中应用交叉滞后面板模型(CLPM)分析心理学纵向数据的实战指南。文章详细拆解了CLPM的核心概念、Mplus语法框架,并涵盖从基础的两变量模型到多变量、潜变量建模的扩展,以及结果解读与常见陷阱规避,旨在帮助研究者利用这一经典工具有效探索变量间的动态预测关系。

weixin_29253711的博客 405

css帧动画点击执行一次_CSS动画深入浅出

实现向右移动动画如果我们想要一个按钮,控制一个div向右移动的动画效果,该怎么实现呢?有三种实现的方法,下面我们分别介绍三种方法1.通过设定left实现思路:通过改变left实现div的右移实现案例请点击:https://jsbin.com/leduqolugi/edit?html,js,outputJS核心代码:function startMove(){ var n =0; var ti...

weixin_35747785的博客 2520

蓝桥杯历年真题分类汇总(史上最全版本,一定不要错过)

天再高又怎样,踮起脚尖就更接近阳光。 满满的 题型总结​ 历年真题​ 视频讲解​ 比赛技巧 题型总结 2021 2020 2019 2018 2017 2016 2015 2014 2013 ...

m0_58367586的博客 11万+

CSS或JS实现逐帧动画方案

使用css或js绘制可控制的逐帧动画

weixin_48003149的博客 3808

通俗傻瓜式理清光栅化渲染和光线追踪渲染的原理

用通俗语言傻瓜式的讲清楚光栅渲染和光线追踪渲染的原理,方便没有相关理论基础的朋友理解入门。

qq_37366618的博客 2万+

VUE3如何使得大屏自适应的几种方法?

16:9。

weixin_42711805的博客 1万+

DaZeng:CSS3逐帧动画原理及其控制

10.28-11.3 WEB(二) 上周作业复习WEB(一),整理资料 居中写三遍,JS原生轮播图背着能写出。 1、手风琴 这个是点了才动你可以写hover,hover之后滑动但是移出就还原,点击才像视频里这样,不还原,你可以用div背景色,或者自己找图这里面是有动画效果的,不是直接就变了。 2、css单位,px、em、rem、vmin、vmax 3、媒体查询 4、帧动画 5、3d盒子 6、还有个...

大曾blog 1619

【开源~磁悬浮】零代码,纯硬件闭环:从霍尔到H桥的磁悬浮稳定术

本文详细介绍了如何不依赖任何代码,仅通过模拟和数字电路的组合,实现一个完整的磁悬浮闭环控制系统。从霍尔传感器检测位置,到运放电路进行信号调理与模拟PID控制,再到H桥驱动电磁铁执行纠偏,全程使用基础电子元器件搭建。文章深入剖析了系统原理、电路设计、调试技巧与实践经验,展现了纯硬件实现自动控制的独特魅力与挑战。

perl8的博客 622

孤陋寡闻了,才知道已经可以用 JS 来控制 CSS 动画了

主要包含两个APIanimate来执行动画,来获取当前元素的动画。并且不止可以获取到animate创建的动画,css中的动画同样可以获取到。通过系列API可以方便的控制已有的CSS动画、添加动画等,而不需要像以前一样使用JS来模拟动画,在某些特定场景下可以提高动画性能、简化动画代码。最近还整理一份JavaScript与ES的笔记,一共25个重要的知识点,对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识,提升工作效率。有需要的小伙伴,可以点击下方卡片领取,无偿分享。

梅花寺 3414

20.Labview使用子vi进行VI间的数据传递详解(模块化)

子VI(模块化)题主在题注中也提到, 子VI的建立只是为了减少程序的负担,那么我们当使用子VI的时候首先就要明确什么是子VI?什么样的程序可以作为子VI?首先我们来看NI官方给的定义,具体说明如下图所示:题主已经将重点画出来了,在官方的解释中将子VI定义为了模块化,大家可以看到创建模块化子VI的特点在于减少代码重复工作优化了程序的框架结构。把一个代码打包,需要的时候就拎出来让他处理处理,不需要的时候就让它躺在我的列表里就行了也不占用运行空间。那么创建子VI需要需要注意以下几点:①任何一个程序。

关注我,更多技术问题欢迎私聊~ 3516

精通 Android NDK/JNI:从入门到精通实战与面试精粹

在Android开发中,

郑伟强dev的专栏 144

【JavaScript、CSS】css动画、js动画

动画css动画js动画 css动画 js动画

南栀的博客 1114

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

js动画和css动画的区别?

js动画和css动画的区别

BANaanaa的博客 1539

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

css动画与js动画的区别

使用动画 (js实现动画,css3实现动画) + 一个是帧动画 一个是补间动画 + 什么是帧动画:使用定时器 每隔一段时间 更改当前元素的状态 + 什么是补间动画:过渡(加过渡只要状态发生改变产出动画) 、 动画(多个节点来控制动画) ,性能会更好 + 在支持H5C3的的浏览器尽可能使用css3动画 (移动端开发) CSS动画 优点: 1、浏览器可以对动画进行优化。 (1) 浏览器使用与 req...

KleyChan的博客 2517

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

html5+css3实现动画、逐帧动画效果

上篇博文中讲明了html5+css3实现2D-3D动画效果,介绍了html5中2d、3d的运用,顺便简明的提到了动画,而本篇将更加详细的说明动画的各运用及说明。 首先我们需要了解css3中动画的意思,明了的意思就是能动态显示的页面效果, 而使用动画,有两种实现方法 (js实现动画,css3实现动画)文章目录动画两大步骤关键帧@keyframes标题调用关键帧animation动画位移案例实现逐帧动...

weixin_43513126的博客 7009

强大的CSS3/JS:帧动画的多种实现方式与性能对比

Web动画形式 首先我们来了解一下Web有哪些动画形式 1\. CSS3动画 Transform(变形) Transition(过渡) Animation(动画) 2\. JS动画(操作DOM、修改CSS属性值) 3\. Canvas动画 4\. SVG动画 5\. 以Three.js为首的3D动画 以上各种动画形式都可以制作出一种类型的动画,那就是帧动画,也叫序列帧动...

qiancheng9998的博客 1096
上一篇: reactjs用剪头函数绑定this,告别constructor绑定this
下一篇: Gradle项目编译报错: 编码 GBK 的不可映射字符
Qssn丶
博客等级 码龄11年 88粉丝 113原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值