- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我对 javascript 比较陌生,但我对其他语言很熟悉。我正在尝试使用 Greensock 时间线构建模块化序列以减少代码重复。我正在尝试拥有一个可由我的所有功能访问的单例时间线。我尝试只使用全局变量并将 to() 方法附加到它。这在 Chrome 和 iexplorer 中有效,但在 Firefox 中无效。我在 Firefox 错误控制台中收到“this.timeline is null”错误。然后我尝试了这个:
var TL = (function() {
var tl = new TimelineMax();
function returnInstance() {
return tl;
}
return {
inst: function() {
return returnInstance();
}
}
})();
这使得我想要的单例,但我只在 FF 中得到相同的错误。下面的代码在 chrome 和 iexplorer 中都可以正常工作:
dev.html:
<html>
<body>
<-- Page content... -->
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/TweenMax.min.js'></script>
<script type='text/javascript' src='js/foo.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
init();
});
</script>
</body>
</html>
foo.js:
//...singleton code from above...
function init(){
do1();
do2(-2);
}
do1(delay){
delay = delay || 0;
var gTL = TL.inst();
gTL.to($("#bar"),2,{css:{autoAlpha:1}},delay);
}
do2(delay){
delay = delay || 0;
var gTL = TL.inst();
gTL.to($("#canv"),2,{css:{autoAlpha:1}},delay);
}
所以,这将使#bar和#canv同时进入(如果我调用do2(0);那么#canv将在#bar完成后进入)。
您是否了解我做错了什么或为什么 FF 以不同的方式处理代码?
感谢您的帮助。
编辑1
浏览器版本: Chrome (19.0.1084.56)互联网浏览器(9.0.8112.16421)火狐浏览器(13.0)
编辑2
该错误是从 TweenMax.min.js 文件内部生成的。
编辑3
在尝试使用全局时间线和单例之前,我通过向每个函数传递 TimelineMax 引用并返回更新后的 TimelineMax 来实现所需的功能。所以,我的代码看起来有点像这样:
foo.js
function init() {
var tl = new TimelineMax();
tl = do1(tl);
tl = do2(tl);
}
do1(TL){
TL.to(...);
return TL;
}
do2(TL){
TL.to(...);
return TL;
}
这在 Firefox 中似乎工作得很好,但与时间线对象一起玩烫手山芋有点乏味。这是首选方法吗?在哪里可以找到格式良好的 JavaScript 编码标准和最佳实践?
编辑4
这是完整的非工作代码。它在 chrome 和 ie 中按预期工作,但我在 FF 中收到来自 TweenMax.js 库的错误。
dev_page2.html:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<link rel="stylesheet" type="text/css" href="css/dev.css">
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#main {
height:100%;
}
</style>
<![endif]-->
</head>
<body class="whiteBG">
<header class="center">
<div id="bar" class="invisible">
<nav>
<!-- nav elements here... -->
</nav><!-- nav -->
</div><!-- bar -->
<canvas id="ani" class='invisible center' width='840' height='420'></canvas>
</header><!-- End header -->
<section id="main">
<div id="content" class="center">
<p>
</p><blockquote>
</blockquote><p class="signature">
</p><p class="float-left">
</p><p class="float-left">
</p>
</div> <!-- End content -->
</section>
<footer class="invisible center">
<div id="footerLeft">
</div>
<div id="footerCenter">
</div>
<div id="footerRight">
</div>
</footer><!-- End footer -->
<script type="text/javascript" src="js/Jquery.js">
</script>
<script type="text/javascript" src="js/TweenMax.js"></script>
<script type="text/javascript" src="js/dev2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
init();
});
</script>
</body>
</html>
dev2.js:
// Copyright 2012 Gray Designs. All Rights Reserved.
/*
* @author rocky.grayjr@gmail.com (Rocky Gray)
* @date May 13, 2012
*/
function init()
{
enterNavBar();
drawCanvas();
enterCanvas(-2);
enterFooter(-1);
}
var TL = (function() {
var tl = new TimelineMax();
function returnInstance() {
return tl;
}
return {
inst: function() {
return returnInstance();
}
}
})();
function enterNavBar(delay)
{
delay = delay || 0;
var gTL = TL.inst();
//nav bar fade in
gTL.to($("#bar"),2,{css:{autoAlpha:1},ease:Quad.easeIn,onComplete:function(){
$("#bar").removeClass('invisible');
}},delay);
}
function enterCanvas(delay)
{
delay = delay || 0;
var gTL = TL.inst();
gTL.to($("#ani"),2,{css:{autoAlpha:1},ease:Quad.easeIn,onComplete:function(){
$("#ani").removeClass('invisible');
}},delay);
}
function enterFooter(delay)
{
delay = delay || 0;
var gTL = TL.inst();
//nav bar fade in
gTL.to($("footer"),2,{css:{autoAlpha:1},ease:Quad.easeIn,onComplete:function(){
$("footer").removeClass('invisible');
}},delay)
}
function drawCanvas()
{
//var canv = document.getElementById("ani");
var $canv = $('#ani');
var ctx = $canv[0].getContext("2d");
ctx.fillStyle="#000";
ctx.fillRect(0,0,840, 420,0);
}
最佳答案
听起来您可能正在使用过时版本的 GreenSock 文件。这听起来像是一个非常罕见的问题,并在更新的版本中得到了修复(对于任何麻烦,我深表歉意)。您介意下载最新版本并重试吗? http://www.greensock.com/v12/
关于javascript - Greensock TimelineMax Javascript 单例在 Firefox 中有所不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11041425/
我一直在尝试让动画在点击时触发,我已经通过 TimelineMax 创建了动画。我不明白为什么,但它一直触发这个动画的第一个实例,有 5 个 .blackout-panel 并且它为第一个 .blac
我必须在不同的步骤中进行剪辑路径转换。然而,在 greensock 中将 链接到 方法并没有提供我正在寻找的平滑度,因为它在样式之间卡住了几毫秒。这是我的代码: const box = documen
我正在尝试了解如何将 TimelineMax 与 Scrollmagic 一起使用。这个问题很容易解释。 我有类似的 DOM 元素,比如移动速度必须比滚动速度慢的粒子。 第一个实现是可行的(没有时间表
我有这个代码: import com.greensock.*; import com.greensock.easing.*; import com.greensock.events.*; var ti
基本上我有这样的结构,我的目标是为 4 个 div 设置动画,这样当您点击一个时,另一个会滑出,当您点击容器时,它们会返回到初始位置。 var TL = new TimelineMax; $('.qu
我是 ScrollMagic 的新手,但很喜欢它。 所以我有一个时间轴,它将飞机的各个部分组合在一起形成一架飞机。我打算将飞机的补间部分更改为整个飞机的单个图像,然后固定单个图像。 我已经设法将飞机的
我正在这样播放我的动画, tl = new TimelineMax({paused:true}); tl.to(DOM_ELEMENT_TOP,1,{left:100},ease:Linear.eas
我在重新初始化 TimelineMax 序列时遇到问题。调整窗口大小时,我需要将所有补间动画恢复为默认样式并根据新窗口大小重新初始化它们。有没有一种简单的方法可以有效地破坏时间线并重新开始,而无需手动
我正在尝试使用 GSAP 和 scrollMagic 创建一个简单的 timelineMax,我收到以下错误。我觉得一切正常,所以我不明白这个错误。 Uncaught TypeError: Canno
我对 javascript 比较陌生,但我对其他语言很熟悉。我正在尝试使用 Greensock 时间线构建模块化序列以减少代码重复。我正在尝试拥有一个可由我的所有功能访问的单例时间线。我尝试只使用全局
我在我的项目中使用 timelineMax 和 fullpage.js,我不希望我的当前幻灯片在我的 timelineMax 动画完成之前向上滑动。 因此,为此我在我的 timelineMax 中使用
我正在尝试使用 ScrollMagic 来控制 TimelineMax 来移动 Lottie 动画的播放头。 因此,当用户滚动时,动画会根据滚动的速度和方向播放。我已经很接近了,需要一点帮助才能将效果
我是闪存开发新手,我听说 Greensock lib 是最好的。但当我尝试下载时,它真的很令人困惑。有很多名字,比如 * TweenNano * TweenLite * TweenMax * Time
我试图用动画来模拟我的导入,但我不断得到 ● Test suite failed to run C:\work\portfolio\node_modules\gsap\TweenMax.js:
我是一名优秀的程序员,十分优秀!