我试图使搜索条动画。我是能够使当你点击它绘制，当你再次点击返回到原来的位置（使用使用GreenSock - drawSVG）。
我希望能够在不刷新页面再次点击，并正确地拥有一切工作。到目前为止，只有drawSVG不爽口的唯一的事。
我也不清楚为什么drawSVG属性没有在这里工作，但是它自己的电脑上工作。 （I am attaching a gif of the animation from my computer）
var $SearchBar = $('#SearchBar');
var $searchIcon = $('#searchIcon');
var $drawSearch = $ ('#drawSearch');
var $leftX = $('#leftX');
var $rightX = $('#rightX');
var $changeColor = $('#changeColor');
//this is my variable for when to draw the search bar
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], {rotation:-45, scale:0.75});
TweenMax.set([$rightX], {rotation:45, scale:0.75});
searchVisible = false;
//funciton to click the searchIcon
function clickSearch(){
console.log("click");
if (searchVisible === true) {
searchVisible = false;
console.log("Yes i see the search draw");
TweenMax.to($changeColor, 2, {alpha:0,scale:0});
TweenMax.to([$leftX],0.25, {rotation:-45});
TweenMax.to([$rightX],0.25, {rotation:45});
TweenMax.to([$rightX,$leftX],0.25, {alpha:0,delay:0.25});
TweenMax.to($drawSearch,1,{drawSVG: 0, delay:0.5});
TweenMax.to($searchIcon, 0.5, {rotation: 0, delay:1.5});
}
else {
console.log("No i dont see the searchdraw");
searchVisible = true;
TweenMax.to($changeColor, 2, {alpha:1,scale:100});
TweenMax.to($searchIcon, 0.25, {rotation: -20});
TweenMax.to($searchIcon, 0.25, {rotation: 88, delay:0.25});
TweenMax.set([$drawSearch],{alpha:1});
TweenMax.from($drawSearch,0.75,{drawSVG:0, delay:0.50});
TweenMax.to([$leftX, $rightX], 0.25,{alpha:1,delay:1});
TweenMax.to([$leftX],0.25, {rotation:0, delay:1});
TweenMax.to([$rightX],0.25, {rotation:0,delay:1});
}
}
//listener for clickSearch function
$SearchBar.on("click", clickSearch);section {
background-color: #900C3F;
display: flex;
align-content: center;
justify-content: center;
cursor: pointer; }
section svg {
height: 100vh;
width: 100vw; }<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<title>SCSS template</title>
</head>
<body>
<section>
<svg id="SearchBar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<style>
.st0 {
fill: #41718e;
stroke: #900C3F;
}
.st1 {
stroke-linecap: round
}
.st1,
.st2 {
fill: none;
stroke: #fff;
stroke-width: 8;
stroke-miterlimit: 10
}
</style>
<circle id="changeColor" class="st0" cx="390.24" cy="178.54" r="24.04" />
<g id="searchIcon">
<path class="st1" d="M409.27 199.36l21.05 21.21" />
<circle class="st2" cx="390.38" cy="178.62" r="24.72" />
</g>
<path class="st1" d="M365.47 220.65l-325.13 1.56.32-66.54 289.96-1.16" id="drawSearch" />
<path id="leftX" class="st1" d="M58.31 175.9l24.62 24.61" />
<path id="rightX" class="st1" d="M82.49 175.77l-24.61 24.62" />
</svg>
</section>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Greensock -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<!-- Greensock Draw SVG -->
<script src="http://dugraphicdesign.com/winterWeb3/DrawSVGPlugin.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/TextPlugin.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>该DrawSVGPlugin.js插件没有加载。如果没有这个插件，该DrawSVG功能将无法正常工作。
使用HTTP使用HTTPS加载的页面将不会加载的JavaScript。这被称为"mixed content"，并通过浏览器出于安全原因阻止。
至于动画，我认为这是因为你想使用.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});