ホームページ > 記事 > ウェブフロントエンド > CSSアニメーションをjsで書くにはどうすればよいですか? jsでCSSアニメーションを書く方法（コード）
CSSアニメーションをjsで書くにはどうすればよいですか? jsでCSSアニメーションを書く方法（コード）
- 不言オリジナル
- 2018-08-11 10:40:122785ブラウズ
この記事の内容は、JSでCSSアニメーションを書く方法についてです。 JSでCSSアニメーションを記述する方法(コード)は、参考になると思います。
setTimeout() または setInterval() を使用して、これら 2 つの関数を使用してコードを定期的に呼び出します。これが原則です。
その目的は、インラインスタイルを繰り返し変更してアニメーションの効果を実現することです
同時にフレームのコンテンツを構築し、関数のアクションの下でCSSの値を継続的に変更させることで、効果が得られますのアニメーションが達成されます
jsはCSSアニメーションを書き込みます
// 将e转化为相对定位的元素，使得其可以左右移动
// 第一个参数为元素对象或者元素的id
// 如果第二个参数是函数，以e为参数，它将在动画结束时调用
// 第三个参数指定e移动的距离，默认为5像素
// 第四个参数指定移动多久，默认500毫秒
function shake(e, oncomplete, distance, time) {
// 句柄函数
if (typeof e === "string") e = document.getElemnentById(e); // 如果传入的是对象的id则获取对象的id，如果传入的为元素（元素为对象）则直接跳过这一句
if (!time) time = 500; // 如果time是空值，则直接使用默认值
if (!distance) distance = 5; // 如果未指定移动的距离，则默认为5像素
var originalStyle = e.style.cssText; // 获取元素e的css样式
e.style.position = "relative"; // 设置为相对定位
var start = (new Date()).getTime(); // 设置动画开始的时间,获取一个格林威治时间
animate(); // 动画开始
// 函数检查消耗时间，并更新e的位置
// 如果动画完成，它将e还原为原始状态
// 否则，将会更新e的位置，安排其自身重新运行
function animate() {
var now = (new Date()).getTime(); // 获取现在的时间
var elapsed = now-start; // 从开始以来消耗了多长时间
var fraction = elapsed / time; // 为总时间的几分之几
if (fraction < 1) { // 如果动画未完成
// 作为动画完成比例的函数，计算e的x位置
// 使用正弦函数将完成比例乘以4pi
// 所以，它将来回往返两次
var x = distance * Math.sin(fraction * 4 * Math.PI); // 使用正弦函数实现每秒四帧
e.style.left = x + "px";
// 在25毫秒后或在总时间的最后尝试再次运行函数
// 目的是为了产生每秒40帧动画
setTimeout(animate, Math.min(25, time-elapsed)); // 使用天花板函数再次调用，再次移动
}
else { // 否则动画完成
e.style.cssText = originalStyle; // 恢复原始样式
if (oncomplete) oncomplete(e); // 产生一个回调函数
}
}
}
// 以毫秒级的时间将e从完全不透明淡出到完全透明
// 在调用函数时假设e是完全不透明的
// oncomplete 是一个可选函数，以e为参数，它将在动画结束的时调用
// 如果不指定time，默认为500毫秒
function fadeOut(e, oncomplete, time) {
if (typeof e === "string") e = document.getElementById(e);
if (!time) time = 500;
// 使用Math.sqrt作为一个缓动函数创建动画
// 非线性函数，一开始淡出的较快，然后逐步的缓慢
var ease = Math.sqrt;
var start = (new Date()).getTime(); // 动画开始的时间
animate(); // 动画开始
function animate() {
var elapsed = (new Date()).getTime()-start; // 消耗的时间
var fraction = elapsed/time; // 总时间的几分之几
if (fraction < 1) { // 如果动画未完成
var opacity = 1 - ease(fraction); // 计算不透明度 即 完成一次变换，开方
e.style.opacity = String(opacity); // 设置透明度
setTimeout(animate, // 进行下一帧
Math.min(25, time-elapsed)); // 在25毫秒之后或者在总时间的最后再次调用
}else {
e.style.opacity = "0"; // 使得e完全透明
if (oncomplete) oncomplete(e); // 在结束的时候回调
}
}
}
計算されたスタイルをクエリします
getComputedStyle(e)
275のスタイル。 。 。 O__O "...
スクリプト化された CSS クラス
インライン スタイルのスクリプト化に加えて、CSS クラスをスクリプト化することもできます
クラスの削除、追加
e.className = "attention"; // 添加类 e.className = ""; // 移除类
クラス リストの表示
classList
読み取り専用属性、実数を返すこともできます要素クラス属性の時間コレクションです。
e.classList()
スクリプト化されたスタイル シート
スタイル シートのオンとオフを切り替えます
style 要素と link 要素の CSSStyleSheet オブジェクトは、js で設定およびクエリできる無効な属性を定義します。属性は仕様の一部ではなく、HTML には存在しませんが、属性はタグ内に設定できませんが、スクリプト内に設定できます
値が true の場合、スタイルシートが閉じられている場合、スタイルシートは閉じられるようにe.disabled = true;開かれます 同様に、スタイルシートルールも
document.styleSheets[0].disabled;クエリ、挿入、削除することができます CSSStyleSheet オブジェクトも定義されています。スタイル シート ルールのクエリ、挿入、削除すべてのスタイル シートの内容をクエリ
var firstRule = document.styleSheets[0].cssRules[0];
document.styleSheets[0] は、ドキュメントまたは埋め込まれたスタイル シートへのリンクを返す読み取り専用属性ですは読み取り専用で、挿入または削除できませんここで、selectorText は CSS セレクターです
cssText は CSS テキスト スタイルです
は addRule() メソッドでもあります
ss.insertRule(".name {color:blue}", 0); ss スタイル シートの 0 番目の cssRules に css ルールを追加して、
deleteRule()メソッド
最後に挿入されたスタイルを削除します。
ss.deleteRule(0);
0番目のルールを削除するとスタイルは継続します 0から始めてください
CSS JS とどちらが速いですか anime_html/css_WEB-ITnose
CSS アニメーションが終了した後、js は翻訳された値を変更できません。_html/css_WEB-ITnose
以上がCSSアニメーションをjsで書くにはどうすればよいですか? jsでCSSアニメーションを書く方法（コード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。