Javascript 格林斯托克-拉威尔

我正在尝试使搜索栏动画化。我可以让它在你点击的时候画进去，当你再次点击时，它会回到原来的位置（使用greensock-drawSVG）

我希望能够在不刷新页面的情况下再次单击，并使一切正常工作。到目前为止，只有drawSVG是唯一没有复活的东西

我也不知道为什么drawSVG属性在这里不起作用，它在我自己的计算机上起作用。（）

var$SearchBar=$（“#SearchBar”）；
var$searchIcon=$（“#searchIcon”）；
var$drawSearch=$（“#drawSearch”）；
var$leftX=$（'#leftX'）；
var$rightX=$（“#rightX”）；
变量$changeColor=$（“#changeColor”）；
//这是何时绘制搜索栏的变量
var-searchVisible=false；
var$black=（'#000'）；
TweenMax.set（$SearchBar，{stroke:'#000'}）；
TweenMax.set（[$searchIcon、$leftX、$rightX、$changeColor]，{transformOrigin:'50%50%}）；
TweenMax.set（[$drawSearch，$leftX，$rightX，$changeColor]，{alpha:0}）；
TweenMax.set（[$leftX]，{旋转：-45，比例：0.75}）；
TweenMax.set（[$rightX]，{旋转：45，比例：0.75}）；
searchVisible=false；
//单击搜索图标的功能
函数clickSearch（）{
控制台日志（“单击”）；
如果（searchVisible==true）{
searchVisible=false；
log（“是的，我看到了搜索结果”）；
TweenMax.to（$changeColor，2，{alpha:0，scale:0}）；
TweenMax.to（[$leftX]，0.25，{旋转：-45}）；
TweenMax.to（[$rightX]，0.25，{旋转：45}）；
TweenMax.to（[$rightX，$leftX]，0.25，{alpha:0，delay:0.25}）；
TweenMax.to（$drawSearch，1，{drawssvg:0，delay:0.5}）；
TweenMax.to（$searchIcon，0.5，{旋转：0，延迟：1.5}）；
}
否则{
log（“不，我没有看到搜索图”）；
searchVisible=true；
TweenMax.to（$changeColor，2，{alpha:1，scale:100}）；
TweenMax.to（$searchIcon，0.25，{旋转：-20}）；
TweenMax.to（$searchIcon，0.25，{旋转：88，延迟：0.25}）；
TweenMax.set（[$drawSearch]，{alpha:1}）；
TweenMax.from（$drawSearch，0.75，{drawssvg:0，delay:0.50}）；
TweenMax.to（[$leftX，$rightX]，0.25，{alpha:1，delay:1}）；
TweenMax.to（[$leftX]，0.25，{旋转：0，延迟：1}）；
TweenMax.to（[$rightX]，0.25，{旋转：0，延迟：1}）；
}
}
//clickSearch函数的侦听器
$SearchBar.on（“单击”，单击搜索）
部分{
背景色：#900C3F；
显示器：flex；
对齐内容：居中对齐；
证明内容：中心；
游标：指针；}
节svg{
高度：100vh；
宽度：100vw；}

SCSS模板
.st0{
填充：#41718e；
行程：#900C3F；
}
.st1{
笔划线头：圆形
}
.st1，
.st2{
填充：无；
冲程：#fff；
笔画宽度：8；
行程限制：10
}
DrawSVGPlugin.js插件未加载。没有这个插件，DrawSVG功能将无法工作

使用https加载的页面不会使用http加载javascript。这被称为，并且由于安全原因被浏览器阻止


至于动画，我认为这是因为您试图在没有正确初始化元素状态的情况下使用
.from（）

不要对
drawSVG
属性使用整数，而是使用百分比，如
中的“100%”
所示。当您使用整数时，它们被解释为原始长度，这可能需要一些努力才能弄清楚。当使用百分比时，DrawSVG会为您计算出来

如果需要，可以将动画设置为
“0%”
或
“100%”
，而不是与先前的状态混在一起

所以用

TweenMax.set([$drawSearch], {drawSVG:"0%"});

然后使用

TweenMax.to($drawSearch, 1, {drawSVG:"0%", delay:0.5});

及

如中所示

TweenMax.to($drawSearch, 0.75, {drawSVG:"100%", delay:0.50});