用js控制css动画效果@keyframes

今天看到一个css动画样式,然后打算封装一个这个css样式。

我用的react组件,然后map了我要的全部盒子

遇到了困难,我打印e和this,都没有我想用的东西。

持续性困惑。

陷入沉思和沉睡。

然后不停打印refs。。。

天啊,我在干什么。我执着地寻找style。。。

我在return的盒子里加了一个style,然后打印了style,的确可以改变css属性

我突然意识到,我需要打印更原始,或者说更底层的一些东西

于是我开始打印window和document,笨蛋啊,操作dom啊

我打印了document,然后开始点方法打印styleSheets

是个数组,然后百度了styleSheets,

应用于文档的所有样式表是通过document.styleSheets集合来表示。通过这个集合的length属性可以获知文档中样式表的数量,而通过方括号语法或itme()方法可以访问每一个样式表。

还查看了这个parentStyleSheet:

parentStyleSheet:在当前样式表是通过@import导入的情况下,这个属性是一个指向导入它的样式表的指针。

我要写动画!我要写动画!

我要怎么才能用上它呢?

this.refs[0].style.animation=‘myMove 5s‘

document.styleSheets[0].insertRule(`@keyframes mymove{from{ color:‘red‘ }to{color:‘blue‘}`,0)

insertRule是个啥呢。。。

https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleSheet/insertRule

这个网址一定要看,一定要看!

讲了insertRule的方法和一些限制。

原文地址:https://www.cnblogs.com/GGbondLearn/p/12261972.html

时间: 2024-10-08 01:24:31

用js控制css动画效果@keyframes的相关文章

CSS动画效果的回调

用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回调函数来处理一些事务,会发现CSS并没有提供直接的方法来让我们使用. 一.css动画简介 css动画效果有两种,即过渡和动画. 1.过渡 当元素从一种样式转变为另一种样式,我们为这种转变添加动画效果,这种效果就称作过渡. CSS的过渡是通过 transtion 属性实现的. transtion属性必

css3控制多重动画效果

今天看到一个类似于门窗开关效果.想着用css3实现,当然js是可以必须能够实现的.我主要想体验一把css3的神奇. 0102 01图片缩小,缩小到看不到之后,出现02图片放大的效果. 实现原理:用一个外层div来触发hover效果,里面套两个图片div, 分别为图一和图二 主要使用css3的transform和transition效果,而且比较重点的是transition-delay延时属性. 具体代码 html-------------------------- <div id="out

原生js判断css动画结束 css 动画结束的回调函数

原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件: transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍然需要使用webkit前缀,所以,我们不得不根据各种浏览器分别检测事件 var transitions = { 'transition':'tra

外贸建站之纯CSS动画效果天之蓝滚动的白云代码分享

外贸建站之纯CSS动画效果天之蓝滚动的白云代码分享 /*改写chinaobd2.com Begin*/ /*如有定义header, footer 注意设置相应的位置,颜色等*/ body { padding-top: 0px; } @media (max-width: 577px) { body { padding-top: 35px; } } /*应用效果:未应用效果时可直接清除*/ @media (min-width: 768px) { header { background: #0064A

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法:

JS控制css

<style> #div1 {position:absolute;left:20px;top:30px;width:20px;height:30px;background-color:red} .red{color: red} .blue{color: blue} </style> <script> var d = 100; function test() { var a = document.getElementById("div1"); a.st

15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) 9. 3D Synth Pure CSS 3D Synthesizer (mousedown for rotation

赞!15个来自 CodePen 的酷炫 CSS 动画效果

CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) 1. JavaScript Mickey Watch Apple watch like Mickey watch by

用js控制css属性的问题

在用js控制css属性时,行内css属性可以任意控制,但若是在<style></style>中写的css属性,均不能用alert读取,但是赋值却有几种现象, 第一种:无法读取,能直接赋值 如下: <!DOCTYPE html> <head> <title>新建网页</title> <meta http-equiv="Content-Type" content="text/html; charset=