js 多次触发同一个animation动画

最新推荐文章于 2022-02-25 17:01:52 发布
最新推荐文章于 2022-02-25 17:01:52 发布
阅读量1.1k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46388469/article/details/105291918
版权
  • List item上图
  • 代码 body
<body>
		<img src="img/top2.jpg"  id="toTop" class="goTop">
	</body>

代码 css

<style type="text/css">
			.goTop{
				width: 100px;
				height: 100px;
				position: fixed;
				bottom: 10%;
				left: 60%;
				cursor: pointer;
				animation: move1 1.5s;
				animation-play-state: paused;
			}
			
			.goTop2{
				width: 100px;
				height: 100px;
				position: fixed;
				bottom: 10%;
				left: 60%;
				animation: move2 1.5s;
			}
			
			@keyframes move1{
                    100%{
						bottom: 80%;
					}
			}
			
			@keyframes move2{
			        100%{
						bottom: 80%;
					}
			}
		</style>

js

<script type="text/javascript">
			window.onload = function() {
				var toTop = document.getElementById("toTop");

				var index = 0;

				toTop.onclick = function() {



					// if(index == 1){
					// 	toTop.className = "goTop";
					// 	toTop.style.animationPlayState = "running";
					// 	index = 0;
					// }else{
					// 	toTop.className = "goTop2";
					// 	index = 1;
					// };

					toTop.className = toTop.className == "goTop" ? "goTop2" : "goTop";
					if (toTop.className == "goTop") {
						toTop.style.animationPlayState = "running";
					}
				};

			}
		</script>

全部源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画再次执行</title>
		<style type="text/css">
			.goTop {
				width: 100px;
				height: 100px;
				position: fixed;
				bottom: 10%;
				left: 60%;
				cursor: pointer;
				animation: move1 1.5s;
				animation-play-state: paused;
			}

			.goTop2 {
				width: 100px;
				height: 100px;
				position: fixed;
				bottom: 10%;
				left: 60%;
				animation: move2 1.5s;
			}

			@keyframes move1 {
				100% {
					bottom: 80%;
				}
			}

			@keyframes move2 {
				100% {
					bottom: 80%;
				}
			}
		</style>

		<script type="text/javascript">
			window.onload = function() {
				var toTop = document.getElementById("toTop");

				var index = 0;

				toTop.onclick = function() {



					// if(index == 1){
					// 	toTop.className = "goTop";
					// 	toTop.style.animationPlayState = "running";
					// 	index = 0;
					// }else{
					// 	toTop.className = "goTop2";
					// 	index = 1;
					// };

					toTop.className = toTop.className == "goTop" ? "goTop2" : "goTop";
					if (toTop.className == "goTop") {
						toTop.style.animationPlayState = "running";
					}
				};

			}
		</script>

	</head>
	<body>
		<img src="img/top2.jpg" id="toTop" class="goTop">
	</body>
</html>

好啦 就这么多了，改变class属性名，暂时只能想到这个方法，欢迎有更好方法的大神指正

秃头小hen
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html animation怎么多次触发,CSS动画之animation再次触发与防止多次触发
weixin_39707201的博客
06-26 1951
上一篇博客记录了animation的介绍,这次记录一下具体的使用。1.再次触发动画可以通过给元素添加类名来触发animation动画，但是需要注意的是再次触发的情况。比如，如果想每次点击鼠标都能重新触发动画，CSS和JS并没有提供这种功能。我们能做的就是要先除去动画的效果，然后让文档重新计算样式，最后将动画效果再次添加到元素上。假定有下面的页面//HTML:Clickmetorunthe...
10-animation
冰霜的博客
08-31 418
动画 ​ 由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作 -过渡和动画之间的异同 1.1不同点 过渡必须人为的触发才会执行动画 动画不需要人为的触发就可以
js条件下多次触发同一个css3动画的解决方案demo
09-18
js条件下多次触发同一个css3动画的解决方案demo，配合blog一起使用。js条件下多次触发同一个css3动画的解决方案demo，配合blog一起使用。
vue-animate-onscroll：一个简单的组件，可在元素滚动到视图中时对其进行动画处理
02-03
Vue动画控制 一个简单的Vue指令，可在元素滚动到视图中时对其进行动画处理。 安装 npm install vue-animate-onscroll # or yarn add vue-animate-onscroll 建立 导入到您的Vue应用程序 import Vue from 'vue' import VueAnimateOnScroll from 'vue-animate-onscroll' Vue . use ( VueAnimateOnScroll ) 用法 出于演示目的，让我们使用css动画库 ，但使用您自己的自定义CSS动画也将以相同的方式工作。 animate.css导入
js实现每次点击都重复执行CSS动画——animation
热门推荐
monkeyfly学前端
05-30 3万+
Write By Monkeyfly 以下内容均为原创，如需转载请注明出处。 前提 想实现的效果：每次点击span元素时，都要实现样式的过渡变换并最终恢复默认样式（主要指背景颜色和字体颜色）。 具体变化过程：默认颜色——指定颜色——恢复默认颜色。 最终效果如下图示： 成功的做法 该做法的出处：javascript中animation运动， 怎样通过点击事件让他重复执行 注：...
tweenjs+threejs 多个动画依次执行
weixin_44136421的博客
01-20 1674
1.使用场景：当小车自动驾驶时，会由多条路线依次驶过，而tweenjs动画是链式函数执行 let myTwen = new TWEEN.Tween(position); //position格式 ：{x:x,y:y} myTwen.to( { x: geometryGroup[1][0], y: geometryGroup[1][1], }, 7000 ) .onUpdate((pos) => {
angular-scroll-animation:AngularJS中的滚动触发动画
05-06
这意味着在一段时间内多次触发滚动事件时，只有最后一次事件会真正执行动画。 ### 结论 `angular-scroll-animation`是AngularJS应用中实现滚动触发动画的一个优秀解决方案。它通过简洁的API和灵活的配置，让开发者...
Scroll-Animation：向下滚动下一个元素时将出现滚动动画
02-15
同时，为了避免多次触发，一旦动画开始，就停止对元素的观察。 总结，实现“向下滚动下一个元素时将出现滚动动画”涉及到以下步骤： 1. 在HTML中设置元素的ID或类名。 2. 使用CSS定义动画效果，如`@keyframes`和`...
vue实现动画，点击实现隐藏显示
04-11
Vue.js是一个轻量级的JavaScript框架，它提供了强大的数据绑定和组件化功能，同时也内置了方便的过渡效果系统，使得在DOM操作时可以平滑地进行动画过渡。 首先，我们需要了解Vue.js的过渡系统。Vue的过渡效果主要由...
页面滚动触发css3动画js插件
12-12
页面滚动触发CSS3动画的JS插件是一种技术手段，用于增强网页的用户体验，特别是在现代网页设计中，这种技术被广泛采用。"delighters.js"就是这样一个插件，它的核心功能是在用户滚动页面时，自动激活那些进入浏览器...
7.6 animation动画如果要像transition一样自带返回动画效果
又一个四季在轮回
07-06 261
animation动画如果要像transition一样自带返回动画效果，而不是突然一帧变成初始状态，应该设0%和100%同一个状态，让50%设置为自己想要的效果： 例如：分销项目go动画： .go{ width: 120rpx; height: 120rpx; margin: 18rpx 20rpx 16rpx 562rpx; animation: updown ease 2.2s infinite; } @keyframes updown { .
用js控制css的animation动画的小想法
JiHejun的博客
02-25 2412
之前写作业想要实现通过点击触发animation动画的效果。理论上可以用js修改css达到目的，不过我不晓得怎样修改keyframes里的内容，在网上也没找到合适的方法。一开始我的思路是写两份css，一份初始状态，一份是点击之后需要显示的效果，但在实际操作中发现如果直接替换css的话，动画效果并不会出现，只能显示动画结束时的状态。所以后面我改变了做法，不改变文件，而是改变css代码块。简单来说就是对同一内容写两份不同的css代码块，通过更换class的值达到修改css的效果。 实例： html &l
animation基本用法（css方式和原始js方式）
库建华的博客
01-11 1万+
浏览器支持： Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。 Safari 和 Chrome 支持替代的 -webkit-animation 属性。（仅支持现代浏览器） 定义： animation 属性是一个简写属性，用于设置六个动画属性： animation-nameanimation-duration（
js动画animation的属性及效果
JYB2106056288的博客
12-11 4291
彻底弄懂animation属性效果 一般来说给一个元素加上animation,加在他的css上就好， 常用的动画属性有： animation-name:test 动画名称，唯一标识，与@keyframes相对接，必选属性； animation-duration:5s 动画的单次生效时间,不包含animation-delay在内，必选 示例： animation-interation-count:2, animation-delay:5s, animation-duration:10s anima
【css3】js条件下多次触发同一个css3动画的解决方案
snow_finland的专栏
09-18 4498
本文适用于非循环播放动画，而是条件下触发播放动画的解决方案 通常，我们会写一个css3的动画作为一个样式，在需要播放动画的时候把样式加到元素上播放一次 如果需要多次触发播放动画，如果是使用将样式先去掉再马上加上的办法，将无法多次播放动画 这里介绍一下解决方案 Animation Test html,body,div,p{ marg
Js点击触发Css3的动画Animations、过渡Transitions效果
weixin_34342905的博客
02-07 1万+
关键是首先指定动画效果的CSS属性名称，然后在Js中改变这个属性 如果不使用Js触发，可以选择利用css的状态：hover，focus，active 来触发，也可以一开始就触发   下例为Js点击触发过渡Transitions效果，指定的属性名称是width  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&...
jq+css实现点击播放动画，可多次点击
qq_43070891的博客
05-23 802
可多次点击播放，采用了添加类名的方法实现动画，无法重复播放，用每次播放完动画之后清楚动画的类名来解决 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js+css实现点击播放动画</title> <style type="text/css"> .container>.animate{ background-color:
js冒泡排序动画
weixin_33800463的博客
03-04 512
在《深入浅出node》中看到了这个问题，感觉很有趣，那就写一个吧！效果如图： 我们先来实现一个简单的冒泡排序： const arrLength = 10 const arrRange = 30 const generateArr = () => { return Array.from({ length: arrLength }).map(() => Math.floor...
微信小程序 怎么实现多次播放动画
最新发布
06-06
要实现多次播放动画，你可以在动画完成时，手动将元素的样式恢复到动画前的状态，然后再次触发动画。以下是一个简单的示例代码： ```html <view class="box" animation="{{animationData}}">这是一个动画 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值