[{"data":1,"prerenderedAt":4703},["Reactive",2],{"content-query-ggyXqCEF0X":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":8,"published":9,"readTime":10,"slug":11,"github":12,"videoId":13,"hasCover":14,"body":15,"_type":4698,"_id":4699,"_source":4700,"_file":4701,"_extension":4702},"/articles/wiggle-animation","articles",false,"","Wiggle Animation using CSS and Angular Animations","2024/04/07",5,"wiggle-animation","OwlHowl3/wiggle-animation-angular","4X24t9keUVg",true,{"type":16,"children":17,"toc":4690},"root",[18,41,46,53,82,216,221,421,426,431,759,770,1063,1068,1080,1373,1379,1384,1412,1570,1583,1891,1897,1924,2212,2217,2313,2319,2339,2470,2481,2533,2550,2635,2674,2945,2957,3283,3306,3644,3657,3819,3825,3837,4218,4236,4420,4438,4650,4655,4661,4684],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23,26,32,34,39],{"type":24,"value":25},"text","Ever wondered how those app icons on your iPhone or MacBook wiggle so charmingly? Or what makes that playful animation\npop up when you type a wrong word in Wordle? Well, it's very simple and it's all about a minimal animation. This article\nshows how to create a simple animation using plain ",{"type":19,"tag":27,"props":28,"children":29},"strong",{},[30],{"type":24,"value":31},"CSS",{"type":24,"value":33}," and then proceeds with ",{"type":19,"tag":27,"props":35,"children":36},{},[37],{"type":24,"value":38},"Angular animations",{"type":24,"value":40},".",{"type":19,"tag":20,"props":42,"children":43},{},[44],{"type":24,"value":45},"Before we start, you might wonder why would you need such a functionality? Right of the top of my head, you can include\nthose into the validation process of some fields, or you might use them as a mean to gather users' attention.",{"type":19,"tag":47,"props":48,"children":50},"h3",{"id":49},"simple-css-solution",[51],{"type":24,"value":52},"Simple CSS Solution",{"type":19,"tag":20,"props":54,"children":55},{},[56,58,65,67,73,75,80],{"type":24,"value":57},"Let's start by creating a new angular component using ",{"type":19,"tag":59,"props":60,"children":62},"code",{"className":61},[],[63],{"type":24,"value":64},"ng g c wiggle-css",{"type":24,"value":66},". In the template file we will add a simple\nlabel and a button that will be further animated. The button will have two classes - ",{"type":19,"tag":68,"props":69,"children":70},"em",{},[71],{"type":24,"value":72},"button",{"type":24,"value":74}," for general styling and\n",{"type":19,"tag":68,"props":76,"children":77},{},[78],{"type":24,"value":79},"wiggle",{"type":24,"value":81}," that will be responsible for the animation.",{"type":19,"tag":83,"props":84,"children":88},"pre",{"className":85,"code":86,"language":87,"meta":7,"style":7},"language-html shiki shiki-themes night-owl","\u003C!-- wiggle-css.component.html -->\n\u003Cdiv>Pure CSS\u003C/div>\n\u003Cbutton class=\"button wiggle\">Hey!\u003C/button>\n","html",[89],{"type":19,"tag":59,"props":90,"children":91},{"__ignoreMap":7},[92,115,156],{"type":19,"tag":93,"props":94,"children":97},"span",{"class":95,"line":96},"line",1,[98,104,110],{"type":19,"tag":93,"props":99,"children":101},{"style":100},"--shiki-default:#637777",[102],{"type":24,"value":103},"\u003C!--",{"type":19,"tag":93,"props":105,"children":107},{"style":106},"--shiki-default:#637777;--shiki-default-font-style:italic",[108],{"type":24,"value":109}," wiggle-css.component.html ",{"type":19,"tag":93,"props":111,"children":112},{"style":100},[113],{"type":24,"value":114},"-->\n",{"type":19,"tag":93,"props":116,"children":118},{"class":95,"line":117},2,[119,125,131,136,142,147,151],{"type":19,"tag":93,"props":120,"children":122},{"style":121},"--shiki-default:#7FDBCA",[123],{"type":24,"value":124},"\u003C",{"type":19,"tag":93,"props":126,"children":128},{"style":127},"--shiki-default:#CAECE6",[129],{"type":24,"value":130},"div",{"type":19,"tag":93,"props":132,"children":133},{"style":121},[134],{"type":24,"value":135},">",{"type":19,"tag":93,"props":137,"children":139},{"style":138},"--shiki-default:#D6DEEB",[140],{"type":24,"value":141},"Pure CSS",{"type":19,"tag":93,"props":143,"children":144},{"style":121},[145],{"type":24,"value":146},"\u003C/",{"type":19,"tag":93,"props":148,"children":149},{"style":127},[150],{"type":24,"value":130},{"type":19,"tag":93,"props":152,"children":153},{"style":121},[154],{"type":24,"value":155},">\n",{"type":19,"tag":93,"props":157,"children":159},{"class":95,"line":158},3,[160,164,168,174,179,185,191,195,199,204,208,212],{"type":19,"tag":93,"props":161,"children":162},{"style":121},[163],{"type":24,"value":124},{"type":19,"tag":93,"props":165,"children":166},{"style":127},[167],{"type":24,"value":72},{"type":19,"tag":93,"props":169,"children":171},{"style":170},"--shiki-default:#C5E478;--shiki-default-font-style:italic",[172],{"type":24,"value":173}," class",{"type":19,"tag":93,"props":175,"children":176},{"style":121},[177],{"type":24,"value":178},"=",{"type":19,"tag":93,"props":180,"children":182},{"style":181},"--shiki-default:#D9F5DD",[183],{"type":24,"value":184},"\"",{"type":19,"tag":93,"props":186,"children":188},{"style":187},"--shiki-default:#ECC48D",[189],{"type":24,"value":190},"button wiggle",{"type":19,"tag":93,"props":192,"children":193},{"style":181},[194],{"type":24,"value":184},{"type":19,"tag":93,"props":196,"children":197},{"style":121},[198],{"type":24,"value":135},{"type":19,"tag":93,"props":200,"children":201},{"style":138},[202],{"type":24,"value":203},"Hey!",{"type":19,"tag":93,"props":205,"children":206},{"style":121},[207],{"type":24,"value":146},{"type":19,"tag":93,"props":209,"children":210},{"style":127},[211],{"type":24,"value":72},{"type":19,"tag":93,"props":213,"children":214},{"style":121},[215],{"type":24,"value":155},{"type":19,"tag":20,"props":217,"children":218},{},[219],{"type":24,"value":220},"With the template in place, let's move on to the styling and update the component css file like this:",{"type":19,"tag":83,"props":222,"children":226},{"className":223,"code":224,"language":225,"meta":7,"style":7},"language-css shiki shiki-themes night-owl","/* wiggle-css.component.scss */\n:host {\n width: 50vw;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1rem;\n}\n","css",[227],{"type":19,"tag":59,"props":228,"children":229},{"__ignoreMap":7},[230,248,267,298,321,342,363,385,412],{"type":19,"tag":93,"props":231,"children":232},{"class":95,"line":96},[233,238,243],{"type":19,"tag":93,"props":234,"children":235},{"style":100},[236],{"type":24,"value":237},"/*",{"type":19,"tag":93,"props":239,"children":240},{"style":106},[241],{"type":24,"value":242}," wiggle-css.component.scss ",{"type":19,"tag":93,"props":244,"children":245},{"style":100},[246],{"type":24,"value":247},"*/\n",{"type":19,"tag":93,"props":249,"children":250},{"class":95,"line":117},[251,257,262],{"type":19,"tag":93,"props":252,"children":254},{"style":253},"--shiki-default:#C5E478",[255],{"type":24,"value":256},":",{"type":19,"tag":93,"props":258,"children":259},{"style":170},[260],{"type":24,"value":261},"host",{"type":19,"tag":93,"props":263,"children":264},{"style":138},[265],{"type":24,"value":266}," {\n",{"type":19,"tag":93,"props":268,"children":269},{"class":95,"line":158},[270,276,281,287,293],{"type":19,"tag":93,"props":271,"children":273},{"style":272},"--shiki-default:#80CBC4",[274],{"type":24,"value":275}," width",{"type":19,"tag":93,"props":277,"children":278},{"style":138},[279],{"type":24,"value":280},": ",{"type":19,"tag":93,"props":282,"children":284},{"style":283},"--shiki-default:#F78C6C",[285],{"type":24,"value":286},"50",{"type":19,"tag":93,"props":288,"children":290},{"style":289},"--shiki-default:#FFEB95",[291],{"type":24,"value":292},"vw",{"type":19,"tag":93,"props":294,"children":295},{"style":138},[296],{"type":24,"value":297},";\n",{"type":19,"tag":93,"props":299,"children":301},{"class":95,"line":300},4,[302,307,311,317],{"type":19,"tag":93,"props":303,"children":304},{"style":272},[305],{"type":24,"value":306}," display",{"type":19,"tag":93,"props":308,"children":309},{"style":138},[310],{"type":24,"value":280},{"type":19,"tag":93,"props":312,"children":314},{"style":313},"--shiki-default:#FF6363",[315],{"type":24,"value":316},"flex",{"type":19,"tag":93,"props":318,"children":319},{"style":138},[320],{"type":24,"value":297},{"type":19,"tag":93,"props":322,"children":323},{"class":95,"line":10},[324,329,333,338],{"type":19,"tag":93,"props":325,"children":326},{"style":272},[327],{"type":24,"value":328}," align-items",{"type":19,"tag":93,"props":330,"children":331},{"style":138},[332],{"type":24,"value":280},{"type":19,"tag":93,"props":334,"children":335},{"style":313},[336],{"type":24,"value":337},"center",{"type":19,"tag":93,"props":339,"children":340},{"style":138},[341],{"type":24,"value":297},{"type":19,"tag":93,"props":343,"children":345},{"class":95,"line":344},6,[346,351,355,359],{"type":19,"tag":93,"props":347,"children":348},{"style":272},[349],{"type":24,"value":350}," justify-content",{"type":19,"tag":93,"props":352,"children":353},{"style":138},[354],{"type":24,"value":280},{"type":19,"tag":93,"props":356,"children":357},{"style":313},[358],{"type":24,"value":337},{"type":19,"tag":93,"props":360,"children":361},{"style":138},[362],{"type":24,"value":297},{"type":19,"tag":93,"props":364,"children":366},{"class":95,"line":365},7,[367,372,376,381],{"type":19,"tag":93,"props":368,"children":369},{"style":272},[370],{"type":24,"value":371}," flex-direction",{"type":19,"tag":93,"props":373,"children":374},{"style":138},[375],{"type":24,"value":280},{"type":19,"tag":93,"props":377,"children":378},{"style":313},[379],{"type":24,"value":380},"column",{"type":19,"tag":93,"props":382,"children":383},{"style":138},[384],{"type":24,"value":297},{"type":19,"tag":93,"props":386,"children":388},{"class":95,"line":387},8,[389,394,398,403,408],{"type":19,"tag":93,"props":390,"children":391},{"style":272},[392],{"type":24,"value":393}," gap",{"type":19,"tag":93,"props":395,"children":396},{"style":138},[397],{"type":24,"value":280},{"type":19,"tag":93,"props":399,"children":400},{"style":283},[401],{"type":24,"value":402},"1",{"type":19,"tag":93,"props":404,"children":405},{"style":289},[406],{"type":24,"value":407},"rem",{"type":19,"tag":93,"props":409,"children":410},{"style":138},[411],{"type":24,"value":297},{"type":19,"tag":93,"props":413,"children":415},{"class":95,"line":414},9,[416],{"type":19,"tag":93,"props":417,"children":418},{"style":138},[419],{"type":24,"value":420},"}\n",{"type":19,"tag":20,"props":422,"children":423},{},[424],{"type":24,"value":425},"First of all, let's add some styles to the component host. The combination of classes used above will make the content\nof the component go 50% width, all items will be centered and will be displayed vertically with some space between them.",{"type":19,"tag":20,"props":427,"children":428},{},[429],{"type":24,"value":430},"Moving on to the button - let's apply some general styles to it, so it will look prettier than the default html version.\nThe button class will look like this:",{"type":19,"tag":83,"props":432,"children":434},{"className":223,"code":433,"language":225,"meta":7,"style":7},"/* wiggle-css.component.scss */\n.button {\n color: rgb(255, 255, 255);\n background-color: rgb(79 70 229);\n border: none;\n border-radius: 0.375rem;\n font-weight: 600;\n font-size: 0.875rem;\n line-height: 1.25rem;\n padding: 0.5rem 0.75rem;\n text-decoration: none;\n cursor: pointer;\n}\n",[435],{"type":19,"tag":59,"props":436,"children":437},{"__ignoreMap":7},[438,453,468,517,556,577,602,623,648,673,708,729,751],{"type":19,"tag":93,"props":439,"children":440},{"class":95,"line":96},[441,445,449],{"type":19,"tag":93,"props":442,"children":443},{"style":100},[444],{"type":24,"value":237},{"type":19,"tag":93,"props":446,"children":447},{"style":106},[448],{"type":24,"value":242},{"type":19,"tag":93,"props":450,"children":451},{"style":100},[452],{"type":24,"value":247},{"type":19,"tag":93,"props":454,"children":455},{"class":95,"line":117},[456,460,464],{"type":19,"tag":93,"props":457,"children":458},{"style":253},[459],{"type":24,"value":40},{"type":19,"tag":93,"props":461,"children":462},{"style":170},[463],{"type":24,"value":72},{"type":19,"tag":93,"props":465,"children":466},{"style":138},[467],{"type":24,"value":266},{"type":19,"tag":93,"props":469,"children":470},{"class":95,"line":158},[471,476,480,485,490,495,500,504,508,512],{"type":19,"tag":93,"props":472,"children":473},{"style":272},[474],{"type":24,"value":475}," color",{"type":19,"tag":93,"props":477,"children":478},{"style":138},[479],{"type":24,"value":280},{"type":19,"tag":93,"props":481,"children":482},{"style":253},[483],{"type":24,"value":484},"rgb",{"type":19,"tag":93,"props":486,"children":487},{"style":138},[488],{"type":24,"value":489},"(",{"type":19,"tag":93,"props":491,"children":492},{"style":283},[493],{"type":24,"value":494},"255",{"type":19,"tag":93,"props":496,"children":497},{"style":138},[498],{"type":24,"value":499},", ",{"type":19,"tag":93,"props":501,"children":502},{"style":283},[503],{"type":24,"value":494},{"type":19,"tag":93,"props":505,"children":506},{"style":138},[507],{"type":24,"value":499},{"type":19,"tag":93,"props":509,"children":510},{"style":283},[511],{"type":24,"value":494},{"type":19,"tag":93,"props":513,"children":514},{"style":138},[515],{"type":24,"value":516},");\n",{"type":19,"tag":93,"props":518,"children":519},{"class":95,"line":300},[520,525,529,533,537,542,547,552],{"type":19,"tag":93,"props":521,"children":522},{"style":272},[523],{"type":24,"value":524}," background-color",{"type":19,"tag":93,"props":526,"children":527},{"style":138},[528],{"type":24,"value":280},{"type":19,"tag":93,"props":530,"children":531},{"style":253},[532],{"type":24,"value":484},{"type":19,"tag":93,"props":534,"children":535},{"style":138},[536],{"type":24,"value":489},{"type":19,"tag":93,"props":538,"children":539},{"style":283},[540],{"type":24,"value":541},"79",{"type":19,"tag":93,"props":543,"children":544},{"style":283},[545],{"type":24,"value":546}," 70",{"type":19,"tag":93,"props":548,"children":549},{"style":283},[550],{"type":24,"value":551}," 229",{"type":19,"tag":93,"props":553,"children":554},{"style":138},[555],{"type":24,"value":516},{"type":19,"tag":93,"props":557,"children":558},{"class":95,"line":10},[559,564,568,573],{"type":19,"tag":93,"props":560,"children":561},{"style":272},[562],{"type":24,"value":563}," border",{"type":19,"tag":93,"props":565,"children":566},{"style":138},[567],{"type":24,"value":280},{"type":19,"tag":93,"props":569,"children":570},{"style":313},[571],{"type":24,"value":572},"none",{"type":19,"tag":93,"props":574,"children":575},{"style":138},[576],{"type":24,"value":297},{"type":19,"tag":93,"props":578,"children":579},{"class":95,"line":344},[580,585,589,594,598],{"type":19,"tag":93,"props":581,"children":582},{"style":272},[583],{"type":24,"value":584}," border-radius",{"type":19,"tag":93,"props":586,"children":587},{"style":138},[588],{"type":24,"value":280},{"type":19,"tag":93,"props":590,"children":591},{"style":283},[592],{"type":24,"value":593},"0.375",{"type":19,"tag":93,"props":595,"children":596},{"style":289},[597],{"type":24,"value":407},{"type":19,"tag":93,"props":599,"children":600},{"style":138},[601],{"type":24,"value":297},{"type":19,"tag":93,"props":603,"children":604},{"class":95,"line":365},[605,610,614,619],{"type":19,"tag":93,"props":606,"children":607},{"style":272},[608],{"type":24,"value":609}," font-weight",{"type":19,"tag":93,"props":611,"children":612},{"style":138},[613],{"type":24,"value":280},{"type":19,"tag":93,"props":615,"children":616},{"style":283},[617],{"type":24,"value":618},"600",{"type":19,"tag":93,"props":620,"children":621},{"style":138},[622],{"type":24,"value":297},{"type":19,"tag":93,"props":624,"children":625},{"class":95,"line":387},[626,631,635,640,644],{"type":19,"tag":93,"props":627,"children":628},{"style":272},[629],{"type":24,"value":630}," font-size",{"type":19,"tag":93,"props":632,"children":633},{"style":138},[634],{"type":24,"value":280},{"type":19,"tag":93,"props":636,"children":637},{"style":283},[638],{"type":24,"value":639},"0.875",{"type":19,"tag":93,"props":641,"children":642},{"style":289},[643],{"type":24,"value":407},{"type":19,"tag":93,"props":645,"children":646},{"style":138},[647],{"type":24,"value":297},{"type":19,"tag":93,"props":649,"children":650},{"class":95,"line":414},[651,656,660,665,669],{"type":19,"tag":93,"props":652,"children":653},{"style":272},[654],{"type":24,"value":655}," line-height",{"type":19,"tag":93,"props":657,"children":658},{"style":138},[659],{"type":24,"value":280},{"type":19,"tag":93,"props":661,"children":662},{"style":283},[663],{"type":24,"value":664},"1.25",{"type":19,"tag":93,"props":666,"children":667},{"style":289},[668],{"type":24,"value":407},{"type":19,"tag":93,"props":670,"children":671},{"style":138},[672],{"type":24,"value":297},{"type":19,"tag":93,"props":674,"children":676},{"class":95,"line":675},10,[677,682,686,691,695,700,704],{"type":19,"tag":93,"props":678,"children":679},{"style":272},[680],{"type":24,"value":681}," padding",{"type":19,"tag":93,"props":683,"children":684},{"style":138},[685],{"type":24,"value":280},{"type":19,"tag":93,"props":687,"children":688},{"style":283},[689],{"type":24,"value":690},"0.5",{"type":19,"tag":93,"props":692,"children":693},{"style":289},[694],{"type":24,"value":407},{"type":19,"tag":93,"props":696,"children":697},{"style":283},[698],{"type":24,"value":699}," 0.75",{"type":19,"tag":93,"props":701,"children":702},{"style":289},[703],{"type":24,"value":407},{"type":19,"tag":93,"props":705,"children":706},{"style":138},[707],{"type":24,"value":297},{"type":19,"tag":93,"props":709,"children":711},{"class":95,"line":710},11,[712,717,721,725],{"type":19,"tag":93,"props":713,"children":714},{"style":272},[715],{"type":24,"value":716}," text-decoration",{"type":19,"tag":93,"props":718,"children":719},{"style":138},[720],{"type":24,"value":280},{"type":19,"tag":93,"props":722,"children":723},{"style":313},[724],{"type":24,"value":572},{"type":19,"tag":93,"props":726,"children":727},{"style":138},[728],{"type":24,"value":297},{"type":19,"tag":93,"props":730,"children":732},{"class":95,"line":731},12,[733,738,742,747],{"type":19,"tag":93,"props":734,"children":735},{"style":272},[736],{"type":24,"value":737}," cursor",{"type":19,"tag":93,"props":739,"children":740},{"style":138},[741],{"type":24,"value":280},{"type":19,"tag":93,"props":743,"children":744},{"style":313},[745],{"type":24,"value":746},"pointer",{"type":19,"tag":93,"props":748,"children":749},{"style":138},[750],{"type":24,"value":297},{"type":19,"tag":93,"props":752,"children":754},{"class":95,"line":753},13,[755],{"type":19,"tag":93,"props":756,"children":757},{"style":138},[758],{"type":24,"value":420},{"type":19,"tag":20,"props":760,"children":761},{},[762,764,768],{"type":24,"value":763},"Finally, the most important piece is the wiggle class. We will make use of css animations and will create a new animation\nwith name ",{"type":19,"tag":68,"props":765,"children":766},{},[767],{"type":24,"value":79},{"type":24,"value":769},", which will last for 1 second and will have an ease-in-out timing. For the defined animation we need\nto attach the keyframes and apply the necessary transforms so that the elements will \"shake\". The desired effect will be\nachieved by setting the rotation to 0 degrees at start (0%) and end (100%) of the animation. The in-between states will\nhave either 10 degree (17%, 50%, 84%) or -10 degree (35%, 67%) rotation.",{"type":19,"tag":83,"props":771,"children":773},{"className":223,"code":772,"language":225,"meta":7,"style":7},"/* wiggle-css.component.scss */\n.wiggle {\n animation: wiggle;\n animation-duration: 1s;\n animation-timing-function: ease-in-out;\n}\n\n@keyframes wiggle {\n 0%, 100% {\n transform: rotate(0deg);\n }\n 17%, 50%, 84% {\n transform: rotate(10deg);\n }\n 35%, 67% {\n transform: rotate(-10deg);\n }\n}\n",[774],{"type":19,"tag":59,"props":775,"children":776},{"__ignoreMap":7},[777,792,807,820,845,866,873,881,906,914,949,957,965,997,1005,1014,1047,1055],{"type":19,"tag":93,"props":778,"children":779},{"class":95,"line":96},[780,784,788],{"type":19,"tag":93,"props":781,"children":782},{"style":100},[783],{"type":24,"value":237},{"type":19,"tag":93,"props":785,"children":786},{"style":106},[787],{"type":24,"value":242},{"type":19,"tag":93,"props":789,"children":790},{"style":100},[791],{"type":24,"value":247},{"type":19,"tag":93,"props":793,"children":794},{"class":95,"line":117},[795,799,803],{"type":19,"tag":93,"props":796,"children":797},{"style":253},[798],{"type":24,"value":40},{"type":19,"tag":93,"props":800,"children":801},{"style":170},[802],{"type":24,"value":79},{"type":19,"tag":93,"props":804,"children":805},{"style":138},[806],{"type":24,"value":266},{"type":19,"tag":93,"props":808,"children":809},{"class":95,"line":158},[810,815],{"type":19,"tag":93,"props":811,"children":812},{"style":272},[813],{"type":24,"value":814}," animation",{"type":19,"tag":93,"props":816,"children":817},{"style":138},[818],{"type":24,"value":819},": wiggle;\n",{"type":19,"tag":93,"props":821,"children":822},{"class":95,"line":300},[823,828,832,836,841],{"type":19,"tag":93,"props":824,"children":825},{"style":272},[826],{"type":24,"value":827}," animation-duration",{"type":19,"tag":93,"props":829,"children":830},{"style":138},[831],{"type":24,"value":280},{"type":19,"tag":93,"props":833,"children":834},{"style":283},[835],{"type":24,"value":402},{"type":19,"tag":93,"props":837,"children":838},{"style":289},[839],{"type":24,"value":840},"s",{"type":19,"tag":93,"props":842,"children":843},{"style":138},[844],{"type":24,"value":297},{"type":19,"tag":93,"props":846,"children":847},{"class":95,"line":10},[848,853,857,862],{"type":19,"tag":93,"props":849,"children":850},{"style":272},[851],{"type":24,"value":852}," animation-timing-function",{"type":19,"tag":93,"props":854,"children":855},{"style":138},[856],{"type":24,"value":280},{"type":19,"tag":93,"props":858,"children":859},{"style":313},[860],{"type":24,"value":861},"ease-in-out",{"type":19,"tag":93,"props":863,"children":864},{"style":138},[865],{"type":24,"value":297},{"type":19,"tag":93,"props":867,"children":868},{"class":95,"line":344},[869],{"type":19,"tag":93,"props":870,"children":871},{"style":138},[872],{"type":24,"value":420},{"type":19,"tag":93,"props":874,"children":875},{"class":95,"line":365},[876],{"type":19,"tag":93,"props":877,"children":878},{"emptyLinePlaceholder":14},[879],{"type":24,"value":880},"\n",{"type":19,"tag":93,"props":882,"children":883},{"class":95,"line":387},[884,890,896,902],{"type":19,"tag":93,"props":885,"children":887},{"style":886},"--shiki-default:#C792EA",[888],{"type":24,"value":889},"@",{"type":19,"tag":93,"props":891,"children":893},{"style":892},"--shiki-default:#C792EA;--shiki-default-font-style:italic",[894],{"type":24,"value":895},"keyframes",{"type":19,"tag":93,"props":897,"children":899},{"style":898},"--shiki-default:#D7DBE0",[900],{"type":24,"value":901}," wiggle",{"type":19,"tag":93,"props":903,"children":904},{"style":138},[905],{"type":24,"value":266},{"type":19,"tag":93,"props":907,"children":908},{"class":95,"line":414},[909],{"type":19,"tag":93,"props":910,"children":911},{"style":138},[912],{"type":24,"value":913}," 0%, 100% {\n",{"type":19,"tag":93,"props":915,"children":916},{"class":95,"line":675},[917,922,926,931,935,940,945],{"type":19,"tag":93,"props":918,"children":919},{"style":272},[920],{"type":24,"value":921}," transform",{"type":19,"tag":93,"props":923,"children":924},{"style":138},[925],{"type":24,"value":280},{"type":19,"tag":93,"props":927,"children":928},{"style":253},[929],{"type":24,"value":930},"rotate",{"type":19,"tag":93,"props":932,"children":933},{"style":138},[934],{"type":24,"value":489},{"type":19,"tag":93,"props":936,"children":937},{"style":283},[938],{"type":24,"value":939},"0",{"type":19,"tag":93,"props":941,"children":942},{"style":289},[943],{"type":24,"value":944},"deg",{"type":19,"tag":93,"props":946,"children":947},{"style":138},[948],{"type":24,"value":516},{"type":19,"tag":93,"props":950,"children":951},{"class":95,"line":710},[952],{"type":19,"tag":93,"props":953,"children":954},{"style":138},[955],{"type":24,"value":956}," }\n",{"type":19,"tag":93,"props":958,"children":959},{"class":95,"line":731},[960],{"type":19,"tag":93,"props":961,"children":962},{"style":138},[963],{"type":24,"value":964}," 17%, 50%, 84% {\n",{"type":19,"tag":93,"props":966,"children":967},{"class":95,"line":753},[968,972,976,980,984,989,993],{"type":19,"tag":93,"props":969,"children":970},{"style":272},[971],{"type":24,"value":921},{"type":19,"tag":93,"props":973,"children":974},{"style":138},[975],{"type":24,"value":280},{"type":19,"tag":93,"props":977,"children":978},{"style":253},[979],{"type":24,"value":930},{"type":19,"tag":93,"props":981,"children":982},{"style":138},[983],{"type":24,"value":489},{"type":19,"tag":93,"props":985,"children":986},{"style":283},[987],{"type":24,"value":988},"10",{"type":19,"tag":93,"props":990,"children":991},{"style":289},[992],{"type":24,"value":944},{"type":19,"tag":93,"props":994,"children":995},{"style":138},[996],{"type":24,"value":516},{"type":19,"tag":93,"props":998,"children":1000},{"class":95,"line":999},14,[1001],{"type":19,"tag":93,"props":1002,"children":1003},{"style":138},[1004],{"type":24,"value":956},{"type":19,"tag":93,"props":1006,"children":1008},{"class":95,"line":1007},15,[1009],{"type":19,"tag":93,"props":1010,"children":1011},{"style":138},[1012],{"type":24,"value":1013}," 35%, 67% {\n",{"type":19,"tag":93,"props":1015,"children":1017},{"class":95,"line":1016},16,[1018,1022,1026,1030,1034,1039,1043],{"type":19,"tag":93,"props":1019,"children":1020},{"style":272},[1021],{"type":24,"value":921},{"type":19,"tag":93,"props":1023,"children":1024},{"style":138},[1025],{"type":24,"value":280},{"type":19,"tag":93,"props":1027,"children":1028},{"style":253},[1029],{"type":24,"value":930},{"type":19,"tag":93,"props":1031,"children":1032},{"style":138},[1033],{"type":24,"value":489},{"type":19,"tag":93,"props":1035,"children":1036},{"style":283},[1037],{"type":24,"value":1038},"-10",{"type":19,"tag":93,"props":1040,"children":1041},{"style":289},[1042],{"type":24,"value":944},{"type":19,"tag":93,"props":1044,"children":1045},{"style":138},[1046],{"type":24,"value":516},{"type":19,"tag":93,"props":1048,"children":1050},{"class":95,"line":1049},17,[1051],{"type":19,"tag":93,"props":1052,"children":1053},{"style":138},[1054],{"type":24,"value":956},{"type":19,"tag":93,"props":1056,"children":1058},{"class":95,"line":1057},18,[1059],{"type":19,"tag":93,"props":1060,"children":1061},{"style":138},[1062],{"type":24,"value":420},{"type":19,"tag":20,"props":1064,"children":1065},{},[1066],{"type":24,"value":1067},"This is it, a simple wiggle animation on our button using just an animation class with some keyframes attached to it.",{"type":19,"tag":20,"props":1069,"children":1070},{},[1071,1073,1078],{"type":24,"value":1072},"The simple solution above is fine, but it can be improved. First of all, it runs only once and second, it runs immediately.\nWhat we want to achieve is to have the animation run multiple times and have a pause between each run. For that we can\nuse another animation property and that is ",{"type":19,"tag":68,"props":1074,"children":1075},{},[1076],{"type":24,"value":1077},"animation-iteration-count",{"type":24,"value":1079}," alongside with updated duration to 4 seconds and\nmodified keyframe timestamps. So, we will set the iteration count to infinite and make all the rotations between the 80%\nkeyframe and 100% keyframe. The updated css should look like this:",{"type":19,"tag":83,"props":1081,"children":1083},{"className":223,"code":1082,"language":225,"meta":7,"style":7},"/* wiggle-css.component.scss */\n.wiggle {\n animation: wiggle;\n animation-duration: 4s;\n animation-iteration-count: infinite;\n animation-timing-function: ease-in-out;\n}\n\n@keyframes wiggle {\n 80%, 100% {\n transform: rotate(0deg);\n }\n 83%, 89%, 97% {\n transform: rotate(10deg);\n }\n 86%, 93% {\n transform: rotate(-10deg);\n }\n}\n",[1084],{"type":19,"tag":59,"props":1085,"children":1086},{"__ignoreMap":7},[1087,1102,1117,1128,1152,1173,1192,1199,1206,1225,1233,1265,1273,1281,1312,1319,1327,1358,1365],{"type":19,"tag":93,"props":1088,"children":1089},{"class":95,"line":96},[1090,1094,1098],{"type":19,"tag":93,"props":1091,"children":1092},{"style":100},[1093],{"type":24,"value":237},{"type":19,"tag":93,"props":1095,"children":1096},{"style":106},[1097],{"type":24,"value":242},{"type":19,"tag":93,"props":1099,"children":1100},{"style":100},[1101],{"type":24,"value":247},{"type":19,"tag":93,"props":1103,"children":1104},{"class":95,"line":117},[1105,1109,1113],{"type":19,"tag":93,"props":1106,"children":1107},{"style":253},[1108],{"type":24,"value":40},{"type":19,"tag":93,"props":1110,"children":1111},{"style":170},[1112],{"type":24,"value":79},{"type":19,"tag":93,"props":1114,"children":1115},{"style":138},[1116],{"type":24,"value":266},{"type":19,"tag":93,"props":1118,"children":1119},{"class":95,"line":158},[1120,1124],{"type":19,"tag":93,"props":1121,"children":1122},{"style":272},[1123],{"type":24,"value":814},{"type":19,"tag":93,"props":1125,"children":1126},{"style":138},[1127],{"type":24,"value":819},{"type":19,"tag":93,"props":1129,"children":1130},{"class":95,"line":300},[1131,1135,1139,1144,1148],{"type":19,"tag":93,"props":1132,"children":1133},{"style":272},[1134],{"type":24,"value":827},{"type":19,"tag":93,"props":1136,"children":1137},{"style":138},[1138],{"type":24,"value":280},{"type":19,"tag":93,"props":1140,"children":1141},{"style":283},[1142],{"type":24,"value":1143},"4",{"type":19,"tag":93,"props":1145,"children":1146},{"style":289},[1147],{"type":24,"value":840},{"type":19,"tag":93,"props":1149,"children":1150},{"style":138},[1151],{"type":24,"value":297},{"type":19,"tag":93,"props":1153,"children":1154},{"class":95,"line":10},[1155,1160,1164,1169],{"type":19,"tag":93,"props":1156,"children":1157},{"style":272},[1158],{"type":24,"value":1159}," animation-iteration-count",{"type":19,"tag":93,"props":1161,"children":1162},{"style":138},[1163],{"type":24,"value":280},{"type":19,"tag":93,"props":1165,"children":1166},{"style":313},[1167],{"type":24,"value":1168},"infinite",{"type":19,"tag":93,"props":1170,"children":1171},{"style":138},[1172],{"type":24,"value":297},{"type":19,"tag":93,"props":1174,"children":1175},{"class":95,"line":344},[1176,1180,1184,1188],{"type":19,"tag":93,"props":1177,"children":1178},{"style":272},[1179],{"type":24,"value":852},{"type":19,"tag":93,"props":1181,"children":1182},{"style":138},[1183],{"type":24,"value":280},{"type":19,"tag":93,"props":1185,"children":1186},{"style":313},[1187],{"type":24,"value":861},{"type":19,"tag":93,"props":1189,"children":1190},{"style":138},[1191],{"type":24,"value":297},{"type":19,"tag":93,"props":1193,"children":1194},{"class":95,"line":365},[1195],{"type":19,"tag":93,"props":1196,"children":1197},{"style":138},[1198],{"type":24,"value":420},{"type":19,"tag":93,"props":1200,"children":1201},{"class":95,"line":387},[1202],{"type":19,"tag":93,"props":1203,"children":1204},{"emptyLinePlaceholder":14},[1205],{"type":24,"value":880},{"type":19,"tag":93,"props":1207,"children":1208},{"class":95,"line":414},[1209,1213,1217,1221],{"type":19,"tag":93,"props":1210,"children":1211},{"style":886},[1212],{"type":24,"value":889},{"type":19,"tag":93,"props":1214,"children":1215},{"style":892},[1216],{"type":24,"value":895},{"type":19,"tag":93,"props":1218,"children":1219},{"style":898},[1220],{"type":24,"value":901},{"type":19,"tag":93,"props":1222,"children":1223},{"style":138},[1224],{"type":24,"value":266},{"type":19,"tag":93,"props":1226,"children":1227},{"class":95,"line":675},[1228],{"type":19,"tag":93,"props":1229,"children":1230},{"style":138},[1231],{"type":24,"value":1232}," 80%, 100% {\n",{"type":19,"tag":93,"props":1234,"children":1235},{"class":95,"line":710},[1236,1241,1245,1249,1253,1257,1261],{"type":19,"tag":93,"props":1237,"children":1238},{"style":272},[1239],{"type":24,"value":1240}," transform",{"type":19,"tag":93,"props":1242,"children":1243},{"style":138},[1244],{"type":24,"value":280},{"type":19,"tag":93,"props":1246,"children":1247},{"style":253},[1248],{"type":24,"value":930},{"type":19,"tag":93,"props":1250,"children":1251},{"style":138},[1252],{"type":24,"value":489},{"type":19,"tag":93,"props":1254,"children":1255},{"style":283},[1256],{"type":24,"value":939},{"type":19,"tag":93,"props":1258,"children":1259},{"style":289},[1260],{"type":24,"value":944},{"type":19,"tag":93,"props":1262,"children":1263},{"style":138},[1264],{"type":24,"value":516},{"type":19,"tag":93,"props":1266,"children":1267},{"class":95,"line":731},[1268],{"type":19,"tag":93,"props":1269,"children":1270},{"style":138},[1271],{"type":24,"value":1272}," }\n",{"type":19,"tag":93,"props":1274,"children":1275},{"class":95,"line":753},[1276],{"type":19,"tag":93,"props":1277,"children":1278},{"style":138},[1279],{"type":24,"value":1280}," 83%, 89%, 97% {\n",{"type":19,"tag":93,"props":1282,"children":1283},{"class":95,"line":999},[1284,1288,1292,1296,1300,1304,1308],{"type":19,"tag":93,"props":1285,"children":1286},{"style":272},[1287],{"type":24,"value":1240},{"type":19,"tag":93,"props":1289,"children":1290},{"style":138},[1291],{"type":24,"value":280},{"type":19,"tag":93,"props":1293,"children":1294},{"style":253},[1295],{"type":24,"value":930},{"type":19,"tag":93,"props":1297,"children":1298},{"style":138},[1299],{"type":24,"value":489},{"type":19,"tag":93,"props":1301,"children":1302},{"style":283},[1303],{"type":24,"value":988},{"type":19,"tag":93,"props":1305,"children":1306},{"style":289},[1307],{"type":24,"value":944},{"type":19,"tag":93,"props":1309,"children":1310},{"style":138},[1311],{"type":24,"value":516},{"type":19,"tag":93,"props":1313,"children":1314},{"class":95,"line":1007},[1315],{"type":19,"tag":93,"props":1316,"children":1317},{"style":138},[1318],{"type":24,"value":1272},{"type":19,"tag":93,"props":1320,"children":1321},{"class":95,"line":1016},[1322],{"type":19,"tag":93,"props":1323,"children":1324},{"style":138},[1325],{"type":24,"value":1326}," 86%, 93% {\n",{"type":19,"tag":93,"props":1328,"children":1329},{"class":95,"line":1049},[1330,1334,1338,1342,1346,1350,1354],{"type":19,"tag":93,"props":1331,"children":1332},{"style":272},[1333],{"type":24,"value":1240},{"type":19,"tag":93,"props":1335,"children":1336},{"style":138},[1337],{"type":24,"value":280},{"type":19,"tag":93,"props":1339,"children":1340},{"style":253},[1341],{"type":24,"value":930},{"type":19,"tag":93,"props":1343,"children":1344},{"style":138},[1345],{"type":24,"value":489},{"type":19,"tag":93,"props":1347,"children":1348},{"style":283},[1349],{"type":24,"value":1038},{"type":19,"tag":93,"props":1351,"children":1352},{"style":289},[1353],{"type":24,"value":944},{"type":19,"tag":93,"props":1355,"children":1356},{"style":138},[1357],{"type":24,"value":516},{"type":19,"tag":93,"props":1359,"children":1360},{"class":95,"line":1057},[1361],{"type":19,"tag":93,"props":1362,"children":1363},{"style":138},[1364],{"type":24,"value":1272},{"type":19,"tag":93,"props":1366,"children":1368},{"class":95,"line":1367},19,[1369],{"type":19,"tag":93,"props":1370,"children":1371},{"style":138},[1372],{"type":24,"value":420},{"type":19,"tag":47,"props":1374,"children":1376},{"id":1375},"triggering-the-animation-on-event",[1377],{"type":24,"value":1378},"Triggering the animation on event",{"type":19,"tag":20,"props":1380,"children":1381},{},[1382],{"type":24,"value":1383},"Moving on, you probably would like to have that animation only on some custom event triggered by the user, for example\nyou want to animate some inputs after the user clicks a submit button and those fields fail the validation.",{"type":19,"tag":20,"props":1385,"children":1386},{},[1387,1389,1395,1397,1403,1405,1411],{"type":24,"value":1388},"For the demo purpose, let's create a new component using ",{"type":19,"tag":59,"props":1390,"children":1392},{"className":1391},[],[1393],{"type":24,"value":1394},"ng g c wiggle-css-click",{"type":24,"value":1396}," command. In the new component we will keep\nthe structure of the html file, but we need to handle the custom (click in our case) event and trigger the animation. So we\nwill attach the ",{"type":19,"tag":59,"props":1398,"children":1400},{"className":1399},[],[1401],{"type":24,"value":1402},"onWiggleClick()",{"type":24,"value":1404}," method and will create a template reference for the element to be animated ",{"type":19,"tag":59,"props":1406,"children":1408},{"className":1407},[],[1409],{"type":24,"value":1410},"#wiggleButton",{"type":24,"value":40},{"type":19,"tag":83,"props":1413,"children":1415},{"className":85,"code":1414,"language":87,"meta":7,"style":7},"\u003C!-- wiggle-css-click.component.html -->\n\u003Cdiv>On Click\u003C/div>\n\u003Cbutton \n class=\"button\"\n (click)=\"onWiggleClick()\"\n #wiggleButton\n>\n Click me!\n\u003C/button>\n",[1416],{"type":19,"tag":59,"props":1417,"children":1418},{"__ignoreMap":7},[1419,1435,1467,1483,1508,1532,1540,1547,1555],{"type":19,"tag":93,"props":1420,"children":1421},{"class":95,"line":96},[1422,1426,1431],{"type":19,"tag":93,"props":1423,"children":1424},{"style":100},[1425],{"type":24,"value":103},{"type":19,"tag":93,"props":1427,"children":1428},{"style":106},[1429],{"type":24,"value":1430}," wiggle-css-click.component.html ",{"type":19,"tag":93,"props":1432,"children":1433},{"style":100},[1434],{"type":24,"value":114},{"type":19,"tag":93,"props":1436,"children":1437},{"class":95,"line":117},[1438,1442,1446,1450,1455,1459,1463],{"type":19,"tag":93,"props":1439,"children":1440},{"style":121},[1441],{"type":24,"value":124},{"type":19,"tag":93,"props":1443,"children":1444},{"style":127},[1445],{"type":24,"value":130},{"type":19,"tag":93,"props":1447,"children":1448},{"style":121},[1449],{"type":24,"value":135},{"type":19,"tag":93,"props":1451,"children":1452},{"style":138},[1453],{"type":24,"value":1454},"On Click",{"type":19,"tag":93,"props":1456,"children":1457},{"style":121},[1458],{"type":24,"value":146},{"type":19,"tag":93,"props":1460,"children":1461},{"style":127},[1462],{"type":24,"value":130},{"type":19,"tag":93,"props":1464,"children":1465},{"style":121},[1466],{"type":24,"value":155},{"type":19,"tag":93,"props":1468,"children":1469},{"class":95,"line":158},[1470,1474,1478],{"type":19,"tag":93,"props":1471,"children":1472},{"style":121},[1473],{"type":24,"value":124},{"type":19,"tag":93,"props":1475,"children":1476},{"style":127},[1477],{"type":24,"value":72},{"type":19,"tag":93,"props":1479,"children":1480},{"style":121},[1481],{"type":24,"value":1482}," \n",{"type":19,"tag":93,"props":1484,"children":1485},{"class":95,"line":300},[1486,1491,1495,1499,1503],{"type":19,"tag":93,"props":1487,"children":1488},{"style":170},[1489],{"type":24,"value":1490}," class",{"type":19,"tag":93,"props":1492,"children":1493},{"style":121},[1494],{"type":24,"value":178},{"type":19,"tag":93,"props":1496,"children":1497},{"style":181},[1498],{"type":24,"value":184},{"type":19,"tag":93,"props":1500,"children":1501},{"style":187},[1502],{"type":24,"value":72},{"type":19,"tag":93,"props":1504,"children":1505},{"style":181},[1506],{"type":24,"value":1507},"\"\n",{"type":19,"tag":93,"props":1509,"children":1510},{"class":95,"line":10},[1511,1516,1520,1524,1528],{"type":19,"tag":93,"props":1512,"children":1513},{"style":170},[1514],{"type":24,"value":1515}," (click)",{"type":19,"tag":93,"props":1517,"children":1518},{"style":121},[1519],{"type":24,"value":178},{"type":19,"tag":93,"props":1521,"children":1522},{"style":181},[1523],{"type":24,"value":184},{"type":19,"tag":93,"props":1525,"children":1526},{"style":187},[1527],{"type":24,"value":1402},{"type":19,"tag":93,"props":1529,"children":1530},{"style":181},[1531],{"type":24,"value":1507},{"type":19,"tag":93,"props":1533,"children":1534},{"class":95,"line":344},[1535],{"type":19,"tag":93,"props":1536,"children":1537},{"style":170},[1538],{"type":24,"value":1539}," #wiggleButton\n",{"type":19,"tag":93,"props":1541,"children":1542},{"class":95,"line":365},[1543],{"type":19,"tag":93,"props":1544,"children":1545},{"style":121},[1546],{"type":24,"value":155},{"type":19,"tag":93,"props":1548,"children":1549},{"class":95,"line":387},[1550],{"type":19,"tag":93,"props":1551,"children":1552},{"style":138},[1553],{"type":24,"value":1554}," Click me!\n",{"type":19,"tag":93,"props":1556,"children":1557},{"class":95,"line":414},[1558,1562,1566],{"type":19,"tag":93,"props":1559,"children":1560},{"style":121},[1561],{"type":24,"value":146},{"type":19,"tag":93,"props":1563,"children":1564},{"style":127},[1565],{"type":24,"value":72},{"type":19,"tag":93,"props":1567,"children":1568},{"style":121},[1569],{"type":24,"value":155},{"type":19,"tag":20,"props":1571,"children":1572},{},[1573,1575,1581],{"type":24,"value":1574},"The css file will have the same structure as the initial option (with 1 second duration and running only once). In the typescript\ncomponent file we need to implement the logic for click handler method. What we need to do in order to trigger the animation\neach time is to remove it's class from the element and add it back. However, since this happens too fast, we need to adjust it\nwith a little trick, which is not the best one since you rely on a side effect. That side effect is to call the offset width on\nthe element itself between removing and adding the animation class. In order to reference the element we will use the ",{"type":19,"tag":59,"props":1576,"children":1578},{"className":1577},[],[1579],{"type":24,"value":1580},"ViewChild",{"type":24,"value":1582},"\ndecorator and manage the classes on its' native element property. The method will look like this:",{"type":19,"tag":83,"props":1584,"children":1588},{"className":1585,"code":1586,"language":1587,"meta":7,"style":7},"language-ts shiki shiki-themes night-owl","// wiggle-css-click.component.ts\nexport class WiggleCssClickComponent {\n @ViewChild(\"wiggleButton\") wiggleButton! : ElementRef\u003CHTMLButtonElement>;\n\n onWiggleClick() {\n this.wiggleButton.nativeElement.classList.remove(\"wiggle\");\n this.wiggleButton.nativeElement.offsetWidth;\n this.wiggleButton.nativeElement.classList.add(\"wiggle\");\n }\n}\n","ts",[1589],{"type":19,"tag":59,"props":1590,"children":1591},{"__ignoreMap":7},[1592,1605,1627,1692,1699,1716,1780,1817,1877,1884],{"type":19,"tag":93,"props":1593,"children":1594},{"class":95,"line":96},[1595,1600],{"type":19,"tag":93,"props":1596,"children":1597},{"style":100},[1598],{"type":24,"value":1599},"//",{"type":19,"tag":93,"props":1601,"children":1602},{"style":106},[1603],{"type":24,"value":1604}," wiggle-css-click.component.ts\n",{"type":19,"tag":93,"props":1606,"children":1607},{"class":95,"line":117},[1608,1613,1617,1623],{"type":19,"tag":93,"props":1609,"children":1610},{"style":892},[1611],{"type":24,"value":1612},"export",{"type":19,"tag":93,"props":1614,"children":1615},{"style":886},[1616],{"type":24,"value":173},{"type":19,"tag":93,"props":1618,"children":1620},{"style":1619},"--shiki-default:#FFCB8B",[1621],{"type":24,"value":1622}," WiggleCssClickComponent",{"type":19,"tag":93,"props":1624,"children":1625},{"style":138},[1626],{"type":24,"value":266},{"type":19,"tag":93,"props":1628,"children":1629},{"class":95,"line":158},[1630,1636,1641,1645,1649,1654,1658,1663,1668,1673,1678,1682,1687],{"type":19,"tag":93,"props":1631,"children":1633},{"style":1632},"--shiki-default:#82AAFF",[1634],{"type":24,"value":1635}," @",{"type":19,"tag":93,"props":1637,"children":1639},{"style":1638},"--shiki-default:#82AAFF;--shiki-default-font-style:italic",[1640],{"type":24,"value":1580},{"type":19,"tag":93,"props":1642,"children":1643},{"style":138},[1644],{"type":24,"value":489},{"type":19,"tag":93,"props":1646,"children":1647},{"style":181},[1648],{"type":24,"value":184},{"type":19,"tag":93,"props":1650,"children":1651},{"style":187},[1652],{"type":24,"value":1653},"wiggleButton",{"type":19,"tag":93,"props":1655,"children":1656},{"style":181},[1657],{"type":24,"value":184},{"type":19,"tag":93,"props":1659,"children":1660},{"style":138},[1661],{"type":24,"value":1662},") wiggleButton",{"type":19,"tag":93,"props":1664,"children":1665},{"style":121},[1666],{"type":24,"value":1667},"!",{"type":19,"tag":93,"props":1669,"children":1670},{"style":121},[1671],{"type":24,"value":1672}," :",{"type":19,"tag":93,"props":1674,"children":1675},{"style":1619},[1676],{"type":24,"value":1677}," ElementRef",{"type":19,"tag":93,"props":1679,"children":1680},{"style":138},[1681],{"type":24,"value":124},{"type":19,"tag":93,"props":1683,"children":1684},{"style":1619},[1685],{"type":24,"value":1686},"HTMLButtonElement",{"type":19,"tag":93,"props":1688,"children":1689},{"style":138},[1690],{"type":24,"value":1691},">;\n",{"type":19,"tag":93,"props":1693,"children":1694},{"class":95,"line":300},[1695],{"type":19,"tag":93,"props":1696,"children":1697},{"emptyLinePlaceholder":14},[1698],{"type":24,"value":880},{"type":19,"tag":93,"props":1700,"children":1701},{"class":95,"line":10},[1702,1707,1712],{"type":19,"tag":93,"props":1703,"children":1704},{"style":1638},[1705],{"type":24,"value":1706}," onWiggleClick",{"type":19,"tag":93,"props":1708,"children":1709},{"style":181},[1710],{"type":24,"value":1711},"()",{"type":19,"tag":93,"props":1713,"children":1714},{"style":138},[1715],{"type":24,"value":266},{"type":19,"tag":93,"props":1717,"children":1718},{"class":95,"line":344},[1719,1724,1728,1733,1737,1742,1746,1751,1755,1760,1764,1768,1772,1776],{"type":19,"tag":93,"props":1720,"children":1721},{"style":121},[1722],{"type":24,"value":1723}," this",{"type":19,"tag":93,"props":1725,"children":1726},{"style":892},[1727],{"type":24,"value":40},{"type":19,"tag":93,"props":1729,"children":1731},{"style":1730},"--shiki-default:#FAF39F;--shiki-default-font-style:italic",[1732],{"type":24,"value":1653},{"type":19,"tag":93,"props":1734,"children":1735},{"style":892},[1736],{"type":24,"value":40},{"type":19,"tag":93,"props":1738,"children":1739},{"style":1730},[1740],{"type":24,"value":1741},"nativeElement",{"type":19,"tag":93,"props":1743,"children":1744},{"style":892},[1745],{"type":24,"value":40},{"type":19,"tag":93,"props":1747,"children":1748},{"style":1730},[1749],{"type":24,"value":1750},"classList",{"type":19,"tag":93,"props":1752,"children":1753},{"style":892},[1754],{"type":24,"value":40},{"type":19,"tag":93,"props":1756,"children":1757},{"style":1638},[1758],{"type":24,"value":1759},"remove",{"type":19,"tag":93,"props":1761,"children":1762},{"style":138},[1763],{"type":24,"value":489},{"type":19,"tag":93,"props":1765,"children":1766},{"style":181},[1767],{"type":24,"value":184},{"type":19,"tag":93,"props":1769,"children":1770},{"style":187},[1771],{"type":24,"value":79},{"type":19,"tag":93,"props":1773,"children":1774},{"style":181},[1775],{"type":24,"value":184},{"type":19,"tag":93,"props":1777,"children":1778},{"style":138},[1779],{"type":24,"value":516},{"type":19,"tag":93,"props":1781,"children":1782},{"class":95,"line":365},[1783,1787,1791,1795,1799,1803,1807,1813],{"type":19,"tag":93,"props":1784,"children":1785},{"style":121},[1786],{"type":24,"value":1723},{"type":19,"tag":93,"props":1788,"children":1789},{"style":892},[1790],{"type":24,"value":40},{"type":19,"tag":93,"props":1792,"children":1793},{"style":1730},[1794],{"type":24,"value":1653},{"type":19,"tag":93,"props":1796,"children":1797},{"style":892},[1798],{"type":24,"value":40},{"type":19,"tag":93,"props":1800,"children":1801},{"style":1730},[1802],{"type":24,"value":1741},{"type":19,"tag":93,"props":1804,"children":1805},{"style":892},[1806],{"type":24,"value":40},{"type":19,"tag":93,"props":1808,"children":1810},{"style":1809},"--shiki-default:#BAEBE2",[1811],{"type":24,"value":1812},"offsetWidth",{"type":19,"tag":93,"props":1814,"children":1815},{"style":138},[1816],{"type":24,"value":297},{"type":19,"tag":93,"props":1818,"children":1819},{"class":95,"line":387},[1820,1824,1828,1832,1836,1840,1844,1848,1852,1857,1861,1865,1869,1873],{"type":19,"tag":93,"props":1821,"children":1822},{"style":121},[1823],{"type":24,"value":1723},{"type":19,"tag":93,"props":1825,"children":1826},{"style":892},[1827],{"type":24,"value":40},{"type":19,"tag":93,"props":1829,"children":1830},{"style":1730},[1831],{"type":24,"value":1653},{"type":19,"tag":93,"props":1833,"children":1834},{"style":892},[1835],{"type":24,"value":40},{"type":19,"tag":93,"props":1837,"children":1838},{"style":1730},[1839],{"type":24,"value":1741},{"type":19,"tag":93,"props":1841,"children":1842},{"style":892},[1843],{"type":24,"value":40},{"type":19,"tag":93,"props":1845,"children":1846},{"style":1730},[1847],{"type":24,"value":1750},{"type":19,"tag":93,"props":1849,"children":1850},{"style":892},[1851],{"type":24,"value":40},{"type":19,"tag":93,"props":1853,"children":1854},{"style":1638},[1855],{"type":24,"value":1856},"add",{"type":19,"tag":93,"props":1858,"children":1859},{"style":138},[1860],{"type":24,"value":489},{"type":19,"tag":93,"props":1862,"children":1863},{"style":181},[1864],{"type":24,"value":184},{"type":19,"tag":93,"props":1866,"children":1867},{"style":187},[1868],{"type":24,"value":79},{"type":19,"tag":93,"props":1870,"children":1871},{"style":181},[1872],{"type":24,"value":184},{"type":19,"tag":93,"props":1874,"children":1875},{"style":138},[1876],{"type":24,"value":516},{"type":19,"tag":93,"props":1878,"children":1879},{"class":95,"line":414},[1880],{"type":19,"tag":93,"props":1881,"children":1882},{"style":138},[1883],{"type":24,"value":1272},{"type":19,"tag":93,"props":1885,"children":1886},{"class":95,"line":675},[1887],{"type":19,"tag":93,"props":1888,"children":1889},{"style":138},[1890],{"type":24,"value":420},{"type":19,"tag":47,"props":1892,"children":1894},{"id":1893},"css-and-angular-directives",[1895],{"type":24,"value":1896},"CSS and Angular Directives",{"type":19,"tag":20,"props":1898,"children":1899},{},[1900,1902,1907,1909,1915,1917,1922],{"type":24,"value":1901},"In Angular world, we can use another option to trigger the behaviour of our element. In this case we are limited only to the\nelement itself. We can use a ",{"type":19,"tag":27,"props":1903,"children":1904},{},[1905],{"type":24,"value":1906},"directive",{"type":24,"value":1908}," to attach the animation behaviour on button click. To generate a new directive we\nshould run the ",{"type":19,"tag":59,"props":1910,"children":1912},{"className":1911},[],[1913],{"type":24,"value":1914},"ng g d wiggle",{"type":24,"value":1916}," command. Inside the directive we need to get the element ref and then listen for the click event\nusing the ",{"type":19,"tag":27,"props":1918,"children":1919},{},[1920],{"type":24,"value":1921},"HostListener",{"type":24,"value":1923}," decorator. The method implementation remains the same as in the option above: we remove the animation\nclass, call the offsetWidth and then attach the class back. The directive class should look like this:",{"type":19,"tag":83,"props":1925,"children":1927},{"className":1585,"code":1926,"language":1587,"meta":7,"style":7},"// wiggle.directive.ts\nexport class WiggleDirective {\n private el = inject(ElementRef);\n\n @HostListener('click') onClick() {\n this.el.nativeElement.classList.remove(\"wiggle\");\n this.el.nativeElement.offsetWidth;\n this.el.nativeElement.classList.add(\"wiggle\");\n }\n}\n",[1928],{"type":19,"tag":59,"props":1929,"children":1930},{"__ignoreMap":7},[1931,1943,1963,1990,1997,2044,2104,2139,2198,2205],{"type":19,"tag":93,"props":1932,"children":1933},{"class":95,"line":96},[1934,1938],{"type":19,"tag":93,"props":1935,"children":1936},{"style":100},[1937],{"type":24,"value":1599},{"type":19,"tag":93,"props":1939,"children":1940},{"style":106},[1941],{"type":24,"value":1942}," wiggle.directive.ts\n",{"type":19,"tag":93,"props":1944,"children":1945},{"class":95,"line":117},[1946,1950,1954,1959],{"type":19,"tag":93,"props":1947,"children":1948},{"style":892},[1949],{"type":24,"value":1612},{"type":19,"tag":93,"props":1951,"children":1952},{"style":886},[1953],{"type":24,"value":173},{"type":19,"tag":93,"props":1955,"children":1956},{"style":1619},[1957],{"type":24,"value":1958}," WiggleDirective",{"type":19,"tag":93,"props":1960,"children":1961},{"style":138},[1962],{"type":24,"value":266},{"type":19,"tag":93,"props":1964,"children":1965},{"class":95,"line":158},[1966,1971,1976,1980,1985],{"type":19,"tag":93,"props":1967,"children":1968},{"style":892},[1969],{"type":24,"value":1970}," private",{"type":19,"tag":93,"props":1972,"children":1973},{"style":138},[1974],{"type":24,"value":1975}," el ",{"type":19,"tag":93,"props":1977,"children":1978},{"style":886},[1979],{"type":24,"value":178},{"type":19,"tag":93,"props":1981,"children":1982},{"style":1638},[1983],{"type":24,"value":1984}," inject",{"type":19,"tag":93,"props":1986,"children":1987},{"style":138},[1988],{"type":24,"value":1989},"(ElementRef);\n",{"type":19,"tag":93,"props":1991,"children":1992},{"class":95,"line":300},[1993],{"type":19,"tag":93,"props":1994,"children":1995},{"emptyLinePlaceholder":14},[1996],{"type":24,"value":880},{"type":19,"tag":93,"props":1998,"children":1999},{"class":95,"line":10},[2000,2004,2008,2012,2017,2022,2026,2031,2036,2040],{"type":19,"tag":93,"props":2001,"children":2002},{"style":1632},[2003],{"type":24,"value":1635},{"type":19,"tag":93,"props":2005,"children":2006},{"style":1638},[2007],{"type":24,"value":1921},{"type":19,"tag":93,"props":2009,"children":2010},{"style":138},[2011],{"type":24,"value":489},{"type":19,"tag":93,"props":2013,"children":2014},{"style":181},[2015],{"type":24,"value":2016},"'",{"type":19,"tag":93,"props":2018,"children":2019},{"style":187},[2020],{"type":24,"value":2021},"click",{"type":19,"tag":93,"props":2023,"children":2024},{"style":181},[2025],{"type":24,"value":2016},{"type":19,"tag":93,"props":2027,"children":2028},{"style":138},[2029],{"type":24,"value":2030},") ",{"type":19,"tag":93,"props":2032,"children":2033},{"style":1638},[2034],{"type":24,"value":2035},"onClick",{"type":19,"tag":93,"props":2037,"children":2038},{"style":181},[2039],{"type":24,"value":1711},{"type":19,"tag":93,"props":2041,"children":2042},{"style":138},[2043],{"type":24,"value":266},{"type":19,"tag":93,"props":2045,"children":2046},{"class":95,"line":344},[2047,2051,2055,2060,2064,2068,2072,2076,2080,2084,2088,2092,2096,2100],{"type":19,"tag":93,"props":2048,"children":2049},{"style":121},[2050],{"type":24,"value":1723},{"type":19,"tag":93,"props":2052,"children":2053},{"style":892},[2054],{"type":24,"value":40},{"type":19,"tag":93,"props":2056,"children":2057},{"style":1730},[2058],{"type":24,"value":2059},"el",{"type":19,"tag":93,"props":2061,"children":2062},{"style":892},[2063],{"type":24,"value":40},{"type":19,"tag":93,"props":2065,"children":2066},{"style":1730},[2067],{"type":24,"value":1741},{"type":19,"tag":93,"props":2069,"children":2070},{"style":892},[2071],{"type":24,"value":40},{"type":19,"tag":93,"props":2073,"children":2074},{"style":1730},[2075],{"type":24,"value":1750},{"type":19,"tag":93,"props":2077,"children":2078},{"style":892},[2079],{"type":24,"value":40},{"type":19,"tag":93,"props":2081,"children":2082},{"style":1638},[2083],{"type":24,"value":1759},{"type":19,"tag":93,"props":2085,"children":2086},{"style":138},[2087],{"type":24,"value":489},{"type":19,"tag":93,"props":2089,"children":2090},{"style":181},[2091],{"type":24,"value":184},{"type":19,"tag":93,"props":2093,"children":2094},{"style":187},[2095],{"type":24,"value":79},{"type":19,"tag":93,"props":2097,"children":2098},{"style":181},[2099],{"type":24,"value":184},{"type":19,"tag":93,"props":2101,"children":2102},{"style":138},[2103],{"type":24,"value":516},{"type":19,"tag":93,"props":2105,"children":2106},{"class":95,"line":365},[2107,2111,2115,2119,2123,2127,2131,2135],{"type":19,"tag":93,"props":2108,"children":2109},{"style":121},[2110],{"type":24,"value":1723},{"type":19,"tag":93,"props":2112,"children":2113},{"style":892},[2114],{"type":24,"value":40},{"type":19,"tag":93,"props":2116,"children":2117},{"style":1730},[2118],{"type":24,"value":2059},{"type":19,"tag":93,"props":2120,"children":2121},{"style":892},[2122],{"type":24,"value":40},{"type":19,"tag":93,"props":2124,"children":2125},{"style":1730},[2126],{"type":24,"value":1741},{"type":19,"tag":93,"props":2128,"children":2129},{"style":892},[2130],{"type":24,"value":40},{"type":19,"tag":93,"props":2132,"children":2133},{"style":1809},[2134],{"type":24,"value":1812},{"type":19,"tag":93,"props":2136,"children":2137},{"style":138},[2138],{"type":24,"value":297},{"type":19,"tag":93,"props":2140,"children":2141},{"class":95,"line":387},[2142,2146,2150,2154,2158,2162,2166,2170,2174,2178,2182,2186,2190,2194],{"type":19,"tag":93,"props":2143,"children":2144},{"style":121},[2145],{"type":24,"value":1723},{"type":19,"tag":93,"props":2147,"children":2148},{"style":892},[2149],{"type":24,"value":40},{"type":19,"tag":93,"props":2151,"children":2152},{"style":1730},[2153],{"type":24,"value":2059},{"type":19,"tag":93,"props":2155,"children":2156},{"style":892},[2157],{"type":24,"value":40},{"type":19,"tag":93,"props":2159,"children":2160},{"style":1730},[2161],{"type":24,"value":1741},{"type":19,"tag":93,"props":2163,"children":2164},{"style":892},[2165],{"type":24,"value":40},{"type":19,"tag":93,"props":2167,"children":2168},{"style":1730},[2169],{"type":24,"value":1750},{"type":19,"tag":93,"props":2171,"children":2172},{"style":892},[2173],{"type":24,"value":40},{"type":19,"tag":93,"props":2175,"children":2176},{"style":1638},[2177],{"type":24,"value":1856},{"type":19,"tag":93,"props":2179,"children":2180},{"style":138},[2181],{"type":24,"value":489},{"type":19,"tag":93,"props":2183,"children":2184},{"style":181},[2185],{"type":24,"value":184},{"type":19,"tag":93,"props":2187,"children":2188},{"style":187},[2189],{"type":24,"value":79},{"type":19,"tag":93,"props":2191,"children":2192},{"style":181},[2193],{"type":24,"value":184},{"type":19,"tag":93,"props":2195,"children":2196},{"style":138},[2197],{"type":24,"value":516},{"type":19,"tag":93,"props":2199,"children":2200},{"class":95,"line":414},[2201],{"type":19,"tag":93,"props":2202,"children":2203},{"style":138},[2204],{"type":24,"value":1272},{"type":19,"tag":93,"props":2206,"children":2207},{"class":95,"line":675},[2208],{"type":19,"tag":93,"props":2209,"children":2210},{"style":138},[2211],{"type":24,"value":420},{"type":19,"tag":20,"props":2213,"children":2214},{},[2215],{"type":24,"value":2216},"And then, in a new component, we have to use the directive on our button:",{"type":19,"tag":83,"props":2218,"children":2220},{"className":85,"code":2219,"language":87,"meta":7,"style":7},"\u003Cdiv>Directive\u003C/div>\n\u003Cbutton class=\"button\" appWiggle>Click me!\u003C/button>\n",[2221],{"type":19,"tag":59,"props":2222,"children":2223},{"__ignoreMap":7},[2224,2256],{"type":19,"tag":93,"props":2225,"children":2226},{"class":95,"line":96},[2227,2231,2235,2239,2244,2248,2252],{"type":19,"tag":93,"props":2228,"children":2229},{"style":121},[2230],{"type":24,"value":124},{"type":19,"tag":93,"props":2232,"children":2233},{"style":127},[2234],{"type":24,"value":130},{"type":19,"tag":93,"props":2236,"children":2237},{"style":121},[2238],{"type":24,"value":135},{"type":19,"tag":93,"props":2240,"children":2241},{"style":138},[2242],{"type":24,"value":2243},"Directive",{"type":19,"tag":93,"props":2245,"children":2246},{"style":121},[2247],{"type":24,"value":146},{"type":19,"tag":93,"props":2249,"children":2250},{"style":127},[2251],{"type":24,"value":130},{"type":19,"tag":93,"props":2253,"children":2254},{"style":121},[2255],{"type":24,"value":155},{"type":19,"tag":93,"props":2257,"children":2258},{"class":95,"line":117},[2259,2263,2267,2271,2275,2279,2283,2287,2292,2296,2301,2305,2309],{"type":19,"tag":93,"props":2260,"children":2261},{"style":121},[2262],{"type":24,"value":124},{"type":19,"tag":93,"props":2264,"children":2265},{"style":127},[2266],{"type":24,"value":72},{"type":19,"tag":93,"props":2268,"children":2269},{"style":170},[2270],{"type":24,"value":173},{"type":19,"tag":93,"props":2272,"children":2273},{"style":121},[2274],{"type":24,"value":178},{"type":19,"tag":93,"props":2276,"children":2277},{"style":181},[2278],{"type":24,"value":184},{"type":19,"tag":93,"props":2280,"children":2281},{"style":187},[2282],{"type":24,"value":72},{"type":19,"tag":93,"props":2284,"children":2285},{"style":181},[2286],{"type":24,"value":184},{"type":19,"tag":93,"props":2288,"children":2289},{"style":170},[2290],{"type":24,"value":2291}," appWiggle",{"type":19,"tag":93,"props":2293,"children":2294},{"style":121},[2295],{"type":24,"value":135},{"type":19,"tag":93,"props":2297,"children":2298},{"style":138},[2299],{"type":24,"value":2300},"Click me!",{"type":19,"tag":93,"props":2302,"children":2303},{"style":121},[2304],{"type":24,"value":146},{"type":19,"tag":93,"props":2306,"children":2307},{"style":127},[2308],{"type":24,"value":72},{"type":19,"tag":93,"props":2310,"children":2311},{"style":121},[2312],{"type":24,"value":155},{"type":19,"tag":47,"props":2314,"children":2316},{"id":2315},"angular-animations-two-states",[2317],{"type":24,"value":2318},"Angular Animations - Two states",{"type":19,"tag":20,"props":2320,"children":2321},{},[2322,2324,2330,2332,2337],{"type":24,"value":2323},"One great thing about angular is that it has its own animation package. We need to enable the animations first. In Angular 17\nstandalone mode we need to update the ",{"type":19,"tag":59,"props":2325,"children":2327},{"className":2326},[],[2328],{"type":24,"value":2329},"app.config.ts",{"type":24,"value":2331}," file and add ",{"type":19,"tag":27,"props":2333,"children":2334},{},[2335],{"type":24,"value":2336},"provideAnimations()",{"type":24,"value":2338}," (also import it at the top)\nto the providers array.",{"type":19,"tag":83,"props":2340,"children":2342},{"className":1585,"code":2341,"language":1587,"meta":7,"style":7},"import { provideAnimations } from '@angular/platform-browser/animations';\n\nexport const appConfig: ApplicationConfig = {\n providers: [provideAnimations()],\n};\n\n",[2343],{"type":19,"tag":59,"props":2344,"children":2345},{"__ignoreMap":7},[2346,2382,2389,2426,2458],{"type":19,"tag":93,"props":2347,"children":2348},{"class":95,"line":96},[2349,2354,2359,2364,2369,2374,2378],{"type":19,"tag":93,"props":2350,"children":2351},{"style":892},[2352],{"type":24,"value":2353},"import",{"type":19,"tag":93,"props":2355,"children":2356},{"style":138},[2357],{"type":24,"value":2358}," { provideAnimations } ",{"type":19,"tag":93,"props":2360,"children":2361},{"style":892},[2362],{"type":24,"value":2363},"from",{"type":19,"tag":93,"props":2365,"children":2366},{"style":181},[2367],{"type":24,"value":2368}," '",{"type":19,"tag":93,"props":2370,"children":2371},{"style":187},[2372],{"type":24,"value":2373},"@angular/platform-browser/animations",{"type":19,"tag":93,"props":2375,"children":2376},{"style":181},[2377],{"type":24,"value":2016},{"type":19,"tag":93,"props":2379,"children":2380},{"style":138},[2381],{"type":24,"value":297},{"type":19,"tag":93,"props":2383,"children":2384},{"class":95,"line":117},[2385],{"type":19,"tag":93,"props":2386,"children":2387},{"emptyLinePlaceholder":14},[2388],{"type":24,"value":880},{"type":19,"tag":93,"props":2390,"children":2391},{"class":95,"line":158},[2392,2397,2402,2407,2411,2417,2422],{"type":19,"tag":93,"props":2393,"children":2394},{"style":892},[2395],{"type":24,"value":2396},"export ",{"type":19,"tag":93,"props":2398,"children":2399},{"style":886},[2400],{"type":24,"value":2401},"const",{"type":19,"tag":93,"props":2403,"children":2404},{"style":1638},[2405],{"type":24,"value":2406}," appConfig",{"type":19,"tag":93,"props":2408,"children":2409},{"style":121},[2410],{"type":24,"value":256},{"type":19,"tag":93,"props":2412,"children":2414},{"style":2413},"--shiki-default:#FFCB8B;--shiki-default-font-style:italic",[2415],{"type":24,"value":2416}," ApplicationConfig",{"type":19,"tag":93,"props":2418,"children":2419},{"style":886},[2420],{"type":24,"value":2421}," =",{"type":19,"tag":93,"props":2423,"children":2424},{"style":886},[2425],{"type":24,"value":266},{"type":19,"tag":93,"props":2427,"children":2428},{"class":95,"line":300},[2429,2434,2438,2443,2448,2453],{"type":19,"tag":93,"props":2430,"children":2431},{"style":892},[2432],{"type":24,"value":2433}," providers",{"type":19,"tag":93,"props":2435,"children":2436},{"style":886},[2437],{"type":24,"value":256},{"type":19,"tag":93,"props":2439,"children":2440},{"style":138},[2441],{"type":24,"value":2442}," [",{"type":19,"tag":93,"props":2444,"children":2445},{"style":1638},[2446],{"type":24,"value":2447},"provideAnimations",{"type":19,"tag":93,"props":2449,"children":2450},{"style":138},[2451],{"type":24,"value":2452},"()]",{"type":19,"tag":93,"props":2454,"children":2455},{"style":886},[2456],{"type":24,"value":2457},",\n",{"type":19,"tag":93,"props":2459,"children":2460},{"class":95,"line":10},[2461,2466],{"type":19,"tag":93,"props":2462,"children":2463},{"style":886},[2464],{"type":24,"value":2465},"}",{"type":19,"tag":93,"props":2467,"children":2468},{"style":138},[2469],{"type":24,"value":297},{"type":19,"tag":20,"props":2471,"children":2472},{},[2473,2475,2480],{"type":24,"value":2474},"That is it, now we can move on and configure our animations. We will create a new file and add a new property to the component\ndecorator - ",{"type":19,"tag":27,"props":2476,"children":2477},{},[2478],{"type":24,"value":2479},"animations",{"type":24,"value":40},{"type":19,"tag":83,"props":2482,"children":2484},{"className":1585,"code":2483,"language":1587,"meta":7,"style":7},"@Component({\n ...,\n animations: [],\n})\n",[2485],{"type":19,"tag":59,"props":2486,"children":2487},{"__ignoreMap":7},[2488,2505,2517,2525],{"type":19,"tag":93,"props":2489,"children":2490},{"class":95,"line":96},[2491,2495,2500],{"type":19,"tag":93,"props":2492,"children":2493},{"style":1632},[2494],{"type":24,"value":889},{"type":19,"tag":93,"props":2496,"children":2497},{"style":1638},[2498],{"type":24,"value":2499},"Component",{"type":19,"tag":93,"props":2501,"children":2502},{"style":138},[2503],{"type":24,"value":2504},"({\n",{"type":19,"tag":93,"props":2506,"children":2507},{"class":95,"line":117},[2508,2513],{"type":19,"tag":93,"props":2509,"children":2510},{"style":121},[2511],{"type":24,"value":2512}," ...",{"type":19,"tag":93,"props":2514,"children":2515},{"style":138},[2516],{"type":24,"value":2457},{"type":19,"tag":93,"props":2518,"children":2519},{"class":95,"line":158},[2520],{"type":19,"tag":93,"props":2521,"children":2522},{"style":138},[2523],{"type":24,"value":2524}," animations: [],\n",{"type":19,"tag":93,"props":2526,"children":2527},{"class":95,"line":300},[2528],{"type":19,"tag":93,"props":2529,"children":2530},{"style":138},[2531],{"type":24,"value":2532},"})\n",{"type":19,"tag":20,"props":2534,"children":2535},{},[2536,2538,2543,2545,2549],{"type":24,"value":2537},"Then we need to add a ",{"type":19,"tag":27,"props":2539,"children":2540},{},[2541],{"type":24,"value":2542},"trigger",{"type":24,"value":2544}," that will be attached to an element in the template, we'll call it ",{"type":19,"tag":68,"props":2546,"children":2547},{},[2548],{"type":24,"value":79},{"type":24,"value":40},{"type":19,"tag":83,"props":2551,"children":2553},{"className":1585,"code":2552,"language":1587,"meta":7,"style":7},"@Component({\n ...,\n animations: [\n trigger('wiggle', []),\n ],\n})\n",[2554],{"type":19,"tag":59,"props":2555,"children":2556},{"__ignoreMap":7},[2557,2572,2583,2591,2620,2628],{"type":19,"tag":93,"props":2558,"children":2559},{"class":95,"line":96},[2560,2564,2568],{"type":19,"tag":93,"props":2561,"children":2562},{"style":1632},[2563],{"type":24,"value":889},{"type":19,"tag":93,"props":2565,"children":2566},{"style":1638},[2567],{"type":24,"value":2499},{"type":19,"tag":93,"props":2569,"children":2570},{"style":138},[2571],{"type":24,"value":2504},{"type":19,"tag":93,"props":2573,"children":2574},{"class":95,"line":117},[2575,2579],{"type":19,"tag":93,"props":2576,"children":2577},{"style":121},[2578],{"type":24,"value":2512},{"type":19,"tag":93,"props":2580,"children":2581},{"style":138},[2582],{"type":24,"value":2457},{"type":19,"tag":93,"props":2584,"children":2585},{"class":95,"line":158},[2586],{"type":19,"tag":93,"props":2587,"children":2588},{"style":138},[2589],{"type":24,"value":2590}," animations: [\n",{"type":19,"tag":93,"props":2592,"children":2593},{"class":95,"line":300},[2594,2599,2603,2607,2611,2615],{"type":19,"tag":93,"props":2595,"children":2596},{"style":1638},[2597],{"type":24,"value":2598}," trigger",{"type":19,"tag":93,"props":2600,"children":2601},{"style":138},[2602],{"type":24,"value":489},{"type":19,"tag":93,"props":2604,"children":2605},{"style":181},[2606],{"type":24,"value":2016},{"type":19,"tag":93,"props":2608,"children":2609},{"style":187},[2610],{"type":24,"value":79},{"type":19,"tag":93,"props":2612,"children":2613},{"style":181},[2614],{"type":24,"value":2016},{"type":19,"tag":93,"props":2616,"children":2617},{"style":138},[2618],{"type":24,"value":2619},", []),\n",{"type":19,"tag":93,"props":2621,"children":2622},{"class":95,"line":10},[2623],{"type":19,"tag":93,"props":2624,"children":2625},{"style":138},[2626],{"type":24,"value":2627}," ],\n",{"type":19,"tag":93,"props":2629,"children":2630},{"class":95,"line":344},[2631],{"type":19,"tag":93,"props":2632,"children":2633},{"style":138},[2634],{"type":24,"value":2532},{"type":19,"tag":20,"props":2636,"children":2637},{},[2638,2640,2645,2647,2652,2654,2659,2661,2666,2668,2673],{"type":24,"value":2639},"The trigger should define a set of ",{"type":19,"tag":27,"props":2641,"children":2642},{},[2643],{"type":24,"value":2644},"states",{"type":24,"value":2646}," and ",{"type":19,"tag":27,"props":2648,"children":2649},{},[2650],{"type":24,"value":2651},"transitions",{"type":24,"value":2653},". Initially we will create two states named ",{"type":19,"tag":68,"props":2655,"children":2656},{},[2657],{"type":24,"value":2658},"start",{"type":24,"value":2660}," and\n",{"type":19,"tag":68,"props":2662,"children":2663},{},[2664],{"type":24,"value":2665},"end",{"type":24,"value":2667},". These states will correspond to the 0% and 100% keyframes from the previous options, respectively. So, each of the states\nwill have a style with ",{"type":19,"tag":27,"props":2669,"children":2670},{},[2671],{"type":24,"value":2672},"rotate: 0deg",{"type":24,"value":40},{"type":19,"tag":83,"props":2675,"children":2677},{"className":1585,"code":2676,"language":1587,"meta":7,"style":7},"// wiggle-ng-animations-1.component.ts\n@Component({\n ...,\n animations: [\n trigger('wiggle', [\n state(\n 'start',\n style({\n rotate: '0deg',\n })\n ),\n state(\n 'end',\n style({\n rotate: '0deg',\n })\n ),\n ]),\n ],\n})\n",[2678],{"type":19,"tag":59,"props":2679,"children":2680},{"__ignoreMap":7},[2681,2693,2708,2720,2728,2757,2770,2790,2802,2827,2835,2843,2854,2873,2884,2907,2914,2921,2929,2937],{"type":19,"tag":93,"props":2682,"children":2683},{"class":95,"line":96},[2684,2688],{"type":19,"tag":93,"props":2685,"children":2686},{"style":100},[2687],{"type":24,"value":1599},{"type":19,"tag":93,"props":2689,"children":2690},{"style":106},[2691],{"type":24,"value":2692}," wiggle-ng-animations-1.component.ts\n",{"type":19,"tag":93,"props":2694,"children":2695},{"class":95,"line":117},[2696,2700,2704],{"type":19,"tag":93,"props":2697,"children":2698},{"style":1632},[2699],{"type":24,"value":889},{"type":19,"tag":93,"props":2701,"children":2702},{"style":1638},[2703],{"type":24,"value":2499},{"type":19,"tag":93,"props":2705,"children":2706},{"style":138},[2707],{"type":24,"value":2504},{"type":19,"tag":93,"props":2709,"children":2710},{"class":95,"line":158},[2711,2716],{"type":19,"tag":93,"props":2712,"children":2713},{"style":121},[2714],{"type":24,"value":2715}," ...",{"type":19,"tag":93,"props":2717,"children":2718},{"style":138},[2719],{"type":24,"value":2457},{"type":19,"tag":93,"props":2721,"children":2722},{"class":95,"line":300},[2723],{"type":19,"tag":93,"props":2724,"children":2725},{"style":138},[2726],{"type":24,"value":2727}," animations: [\n",{"type":19,"tag":93,"props":2729,"children":2730},{"class":95,"line":10},[2731,2736,2740,2744,2748,2752],{"type":19,"tag":93,"props":2732,"children":2733},{"style":1638},[2734],{"type":24,"value":2735}," trigger",{"type":19,"tag":93,"props":2737,"children":2738},{"style":138},[2739],{"type":24,"value":489},{"type":19,"tag":93,"props":2741,"children":2742},{"style":181},[2743],{"type":24,"value":2016},{"type":19,"tag":93,"props":2745,"children":2746},{"style":187},[2747],{"type":24,"value":79},{"type":19,"tag":93,"props":2749,"children":2750},{"style":181},[2751],{"type":24,"value":2016},{"type":19,"tag":93,"props":2753,"children":2754},{"style":138},[2755],{"type":24,"value":2756},", [\n",{"type":19,"tag":93,"props":2758,"children":2759},{"class":95,"line":344},[2760,2765],{"type":19,"tag":93,"props":2761,"children":2762},{"style":1638},[2763],{"type":24,"value":2764}," state",{"type":19,"tag":93,"props":2766,"children":2767},{"style":138},[2768],{"type":24,"value":2769},"(\n",{"type":19,"tag":93,"props":2771,"children":2772},{"class":95,"line":365},[2773,2778,2782,2786],{"type":19,"tag":93,"props":2774,"children":2775},{"style":181},[2776],{"type":24,"value":2777}," '",{"type":19,"tag":93,"props":2779,"children":2780},{"style":187},[2781],{"type":24,"value":2658},{"type":19,"tag":93,"props":2783,"children":2784},{"style":181},[2785],{"type":24,"value":2016},{"type":19,"tag":93,"props":2787,"children":2788},{"style":138},[2789],{"type":24,"value":2457},{"type":19,"tag":93,"props":2791,"children":2792},{"class":95,"line":387},[2793,2798],{"type":19,"tag":93,"props":2794,"children":2795},{"style":1638},[2796],{"type":24,"value":2797}," style",{"type":19,"tag":93,"props":2799,"children":2800},{"style":138},[2801],{"type":24,"value":2504},{"type":19,"tag":93,"props":2803,"children":2804},{"class":95,"line":414},[2805,2810,2814,2819,2823],{"type":19,"tag":93,"props":2806,"children":2807},{"style":138},[2808],{"type":24,"value":2809}," rotate: ",{"type":19,"tag":93,"props":2811,"children":2812},{"style":181},[2813],{"type":24,"value":2016},{"type":19,"tag":93,"props":2815,"children":2816},{"style":187},[2817],{"type":24,"value":2818},"0deg",{"type":19,"tag":93,"props":2820,"children":2821},{"style":181},[2822],{"type":24,"value":2016},{"type":19,"tag":93,"props":2824,"children":2825},{"style":138},[2826],{"type":24,"value":2457},{"type":19,"tag":93,"props":2828,"children":2829},{"class":95,"line":675},[2830],{"type":19,"tag":93,"props":2831,"children":2832},{"style":138},[2833],{"type":24,"value":2834}," })\n",{"type":19,"tag":93,"props":2836,"children":2837},{"class":95,"line":710},[2838],{"type":19,"tag":93,"props":2839,"children":2840},{"style":138},[2841],{"type":24,"value":2842}," ),\n",{"type":19,"tag":93,"props":2844,"children":2845},{"class":95,"line":731},[2846,2850],{"type":19,"tag":93,"props":2847,"children":2848},{"style":1638},[2849],{"type":24,"value":2764},{"type":19,"tag":93,"props":2851,"children":2852},{"style":138},[2853],{"type":24,"value":2769},{"type":19,"tag":93,"props":2855,"children":2856},{"class":95,"line":753},[2857,2861,2865,2869],{"type":19,"tag":93,"props":2858,"children":2859},{"style":181},[2860],{"type":24,"value":2777},{"type":19,"tag":93,"props":2862,"children":2863},{"style":187},[2864],{"type":24,"value":2665},{"type":19,"tag":93,"props":2866,"children":2867},{"style":181},[2868],{"type":24,"value":2016},{"type":19,"tag":93,"props":2870,"children":2871},{"style":138},[2872],{"type":24,"value":2457},{"type":19,"tag":93,"props":2874,"children":2875},{"class":95,"line":999},[2876,2880],{"type":19,"tag":93,"props":2877,"children":2878},{"style":1638},[2879],{"type":24,"value":2797},{"type":19,"tag":93,"props":2881,"children":2882},{"style":138},[2883],{"type":24,"value":2504},{"type":19,"tag":93,"props":2885,"children":2886},{"class":95,"line":1007},[2887,2891,2895,2899,2903],{"type":19,"tag":93,"props":2888,"children":2889},{"style":138},[2890],{"type":24,"value":2809},{"type":19,"tag":93,"props":2892,"children":2893},{"style":181},[2894],{"type":24,"value":2016},{"type":19,"tag":93,"props":2896,"children":2897},{"style":187},[2898],{"type":24,"value":2818},{"type":19,"tag":93,"props":2900,"children":2901},{"style":181},[2902],{"type":24,"value":2016},{"type":19,"tag":93,"props":2904,"children":2905},{"style":138},[2906],{"type":24,"value":2457},{"type":19,"tag":93,"props":2908,"children":2909},{"class":95,"line":1016},[2910],{"type":19,"tag":93,"props":2911,"children":2912},{"style":138},[2913],{"type":24,"value":2834},{"type":19,"tag":93,"props":2915,"children":2916},{"class":95,"line":1049},[2917],{"type":19,"tag":93,"props":2918,"children":2919},{"style":138},[2920],{"type":24,"value":2842},{"type":19,"tag":93,"props":2922,"children":2923},{"class":95,"line":1057},[2924],{"type":19,"tag":93,"props":2925,"children":2926},{"style":138},[2927],{"type":24,"value":2928}," ]),\n",{"type":19,"tag":93,"props":2930,"children":2931},{"class":95,"line":1367},[2932],{"type":19,"tag":93,"props":2933,"children":2934},{"style":138},[2935],{"type":24,"value":2936}," ],\n",{"type":19,"tag":93,"props":2938,"children":2940},{"class":95,"line":2939},20,[2941],{"type":19,"tag":93,"props":2942,"children":2943},{"style":138},[2944],{"type":24,"value":2532},{"type":19,"tag":20,"props":2946,"children":2947},{},[2948,2950,2955],{"type":24,"value":2949},"Now that we have the states, we need to define an animation that will run whenever a state is changed between these two, thus the\nstate change expression will look like this: ",{"type":19,"tag":27,"props":2951,"children":2952},{},[2953],{"type":24,"value":2954},"'start \u003C=> end'",{"type":24,"value":2956}," (notice the \u003C=> symbol). For the transition we also have to\ndeclare the animation, which will run for 1 second in our case and will have an array of three keyframes, which will alternate styles\nbetween -10 degree rotation and 10 degree rotation at offset 0.25, 0.5 and 0.75. These offsets are an equivalent to keyframe percents\nin css and correspond to the point in time from the whole animation duration when the corresponding styles are applied.",{"type":19,"tag":83,"props":2958,"children":2960},{"className":1585,"code":2959,"language":1587,"meta":7,"style":7},"// wiggle-ng-animations-1.component.ts\n@Component({\n ...,\n animations: [\n trigger('wiggle', [\n // [states],\n transition(\n 'start \u003C=> end',\n animate(\n '1s',\n keyframes([\n style({ rotate: '-10deg', offset: 0.25 }),\n style({ rotate: '10deg', offset: 0.5 }),\n style({ rotate: '-10deg', offset: 0.75 }),\n ])\n )\n ),\n ]),\n ],\n})\n",[2961],{"type":19,"tag":59,"props":2962,"children":2963},{"__ignoreMap":7},[2964,2975,2990,3001,3008,3035,3048,3060,3080,3092,3113,3126,3167,3203,3239,3247,3255,3262,3269,3276],{"type":19,"tag":93,"props":2965,"children":2966},{"class":95,"line":96},[2967,2971],{"type":19,"tag":93,"props":2968,"children":2969},{"style":100},[2970],{"type":24,"value":1599},{"type":19,"tag":93,"props":2972,"children":2973},{"style":106},[2974],{"type":24,"value":2692},{"type":19,"tag":93,"props":2976,"children":2977},{"class":95,"line":117},[2978,2982,2986],{"type":19,"tag":93,"props":2979,"children":2980},{"style":1632},[2981],{"type":24,"value":889},{"type":19,"tag":93,"props":2983,"children":2984},{"style":1638},[2985],{"type":24,"value":2499},{"type":19,"tag":93,"props":2987,"children":2988},{"style":138},[2989],{"type":24,"value":2504},{"type":19,"tag":93,"props":2991,"children":2992},{"class":95,"line":158},[2993,2997],{"type":19,"tag":93,"props":2994,"children":2995},{"style":121},[2996],{"type":24,"value":2715},{"type":19,"tag":93,"props":2998,"children":2999},{"style":138},[3000],{"type":24,"value":2457},{"type":19,"tag":93,"props":3002,"children":3003},{"class":95,"line":300},[3004],{"type":19,"tag":93,"props":3005,"children":3006},{"style":138},[3007],{"type":24,"value":2727},{"type":19,"tag":93,"props":3009,"children":3010},{"class":95,"line":10},[3011,3015,3019,3023,3027,3031],{"type":19,"tag":93,"props":3012,"children":3013},{"style":1638},[3014],{"type":24,"value":2735},{"type":19,"tag":93,"props":3016,"children":3017},{"style":138},[3018],{"type":24,"value":489},{"type":19,"tag":93,"props":3020,"children":3021},{"style":181},[3022],{"type":24,"value":2016},{"type":19,"tag":93,"props":3024,"children":3025},{"style":187},[3026],{"type":24,"value":79},{"type":19,"tag":93,"props":3028,"children":3029},{"style":181},[3030],{"type":24,"value":2016},{"type":19,"tag":93,"props":3032,"children":3033},{"style":138},[3034],{"type":24,"value":2756},{"type":19,"tag":93,"props":3036,"children":3037},{"class":95,"line":344},[3038,3043],{"type":19,"tag":93,"props":3039,"children":3040},{"style":100},[3041],{"type":24,"value":3042}," //",{"type":19,"tag":93,"props":3044,"children":3045},{"style":106},[3046],{"type":24,"value":3047}," [states],\n",{"type":19,"tag":93,"props":3049,"children":3050},{"class":95,"line":365},[3051,3056],{"type":19,"tag":93,"props":3052,"children":3053},{"style":1638},[3054],{"type":24,"value":3055}," transition",{"type":19,"tag":93,"props":3057,"children":3058},{"style":138},[3059],{"type":24,"value":2769},{"type":19,"tag":93,"props":3061,"children":3062},{"class":95,"line":387},[3063,3067,3072,3076],{"type":19,"tag":93,"props":3064,"children":3065},{"style":181},[3066],{"type":24,"value":2777},{"type":19,"tag":93,"props":3068,"children":3069},{"style":187},[3070],{"type":24,"value":3071},"start \u003C=> end",{"type":19,"tag":93,"props":3073,"children":3074},{"style":181},[3075],{"type":24,"value":2016},{"type":19,"tag":93,"props":3077,"children":3078},{"style":138},[3079],{"type":24,"value":2457},{"type":19,"tag":93,"props":3081,"children":3082},{"class":95,"line":414},[3083,3088],{"type":19,"tag":93,"props":3084,"children":3085},{"style":1638},[3086],{"type":24,"value":3087}," animate",{"type":19,"tag":93,"props":3089,"children":3090},{"style":138},[3091],{"type":24,"value":2769},{"type":19,"tag":93,"props":3093,"children":3094},{"class":95,"line":675},[3095,3100,3105,3109],{"type":19,"tag":93,"props":3096,"children":3097},{"style":181},[3098],{"type":24,"value":3099}," '",{"type":19,"tag":93,"props":3101,"children":3102},{"style":187},[3103],{"type":24,"value":3104},"1s",{"type":19,"tag":93,"props":3106,"children":3107},{"style":181},[3108],{"type":24,"value":2016},{"type":19,"tag":93,"props":3110,"children":3111},{"style":138},[3112],{"type":24,"value":2457},{"type":19,"tag":93,"props":3114,"children":3115},{"class":95,"line":710},[3116,3121],{"type":19,"tag":93,"props":3117,"children":3118},{"style":1638},[3119],{"type":24,"value":3120}," keyframes",{"type":19,"tag":93,"props":3122,"children":3123},{"style":138},[3124],{"type":24,"value":3125},"([\n",{"type":19,"tag":93,"props":3127,"children":3128},{"class":95,"line":731},[3129,3134,3139,3143,3148,3152,3157,3162],{"type":19,"tag":93,"props":3130,"children":3131},{"style":1638},[3132],{"type":24,"value":3133}," style",{"type":19,"tag":93,"props":3135,"children":3136},{"style":138},[3137],{"type":24,"value":3138},"({ rotate: ",{"type":19,"tag":93,"props":3140,"children":3141},{"style":181},[3142],{"type":24,"value":2016},{"type":19,"tag":93,"props":3144,"children":3145},{"style":187},[3146],{"type":24,"value":3147},"-10deg",{"type":19,"tag":93,"props":3149,"children":3150},{"style":181},[3151],{"type":24,"value":2016},{"type":19,"tag":93,"props":3153,"children":3154},{"style":138},[3155],{"type":24,"value":3156},", offset: ",{"type":19,"tag":93,"props":3158,"children":3159},{"style":283},[3160],{"type":24,"value":3161},"0.25",{"type":19,"tag":93,"props":3163,"children":3164},{"style":138},[3165],{"type":24,"value":3166}," }),\n",{"type":19,"tag":93,"props":3168,"children":3169},{"class":95,"line":753},[3170,3174,3178,3182,3187,3191,3195,3199],{"type":19,"tag":93,"props":3171,"children":3172},{"style":1638},[3173],{"type":24,"value":3133},{"type":19,"tag":93,"props":3175,"children":3176},{"style":138},[3177],{"type":24,"value":3138},{"type":19,"tag":93,"props":3179,"children":3180},{"style":181},[3181],{"type":24,"value":2016},{"type":19,"tag":93,"props":3183,"children":3184},{"style":187},[3185],{"type":24,"value":3186},"10deg",{"type":19,"tag":93,"props":3188,"children":3189},{"style":181},[3190],{"type":24,"value":2016},{"type":19,"tag":93,"props":3192,"children":3193},{"style":138},[3194],{"type":24,"value":3156},{"type":19,"tag":93,"props":3196,"children":3197},{"style":283},[3198],{"type":24,"value":690},{"type":19,"tag":93,"props":3200,"children":3201},{"style":138},[3202],{"type":24,"value":3166},{"type":19,"tag":93,"props":3204,"children":3205},{"class":95,"line":999},[3206,3210,3214,3218,3222,3226,3230,3235],{"type":19,"tag":93,"props":3207,"children":3208},{"style":1638},[3209],{"type":24,"value":3133},{"type":19,"tag":93,"props":3211,"children":3212},{"style":138},[3213],{"type":24,"value":3138},{"type":19,"tag":93,"props":3215,"children":3216},{"style":181},[3217],{"type":24,"value":2016},{"type":19,"tag":93,"props":3219,"children":3220},{"style":187},[3221],{"type":24,"value":3147},{"type":19,"tag":93,"props":3223,"children":3224},{"style":181},[3225],{"type":24,"value":2016},{"type":19,"tag":93,"props":3227,"children":3228},{"style":138},[3229],{"type":24,"value":3156},{"type":19,"tag":93,"props":3231,"children":3232},{"style":283},[3233],{"type":24,"value":3234},"0.75",{"type":19,"tag":93,"props":3236,"children":3237},{"style":138},[3238],{"type":24,"value":3166},{"type":19,"tag":93,"props":3240,"children":3241},{"class":95,"line":1007},[3242],{"type":19,"tag":93,"props":3243,"children":3244},{"style":138},[3245],{"type":24,"value":3246}," ])\n",{"type":19,"tag":93,"props":3248,"children":3249},{"class":95,"line":1016},[3250],{"type":19,"tag":93,"props":3251,"children":3252},{"style":138},[3253],{"type":24,"value":3254}," )\n",{"type":19,"tag":93,"props":3256,"children":3257},{"class":95,"line":1049},[3258],{"type":19,"tag":93,"props":3259,"children":3260},{"style":138},[3261],{"type":24,"value":2842},{"type":19,"tag":93,"props":3263,"children":3264},{"class":95,"line":1057},[3265],{"type":19,"tag":93,"props":3266,"children":3267},{"style":138},[3268],{"type":24,"value":2928},{"type":19,"tag":93,"props":3270,"children":3271},{"class":95,"line":1367},[3272],{"type":19,"tag":93,"props":3273,"children":3274},{"style":138},[3275],{"type":24,"value":2936},{"type":19,"tag":93,"props":3277,"children":3278},{"class":95,"line":2939},[3279],{"type":19,"tag":93,"props":3280,"children":3281},{"style":138},[3282],{"type":24,"value":2532},{"type":19,"tag":20,"props":3284,"children":3285},{},[3286,3288,3292,3293,3297,3299,3304],{"type":24,"value":3287},"Finally, we need to control the states (",{"type":19,"tag":27,"props":3289,"children":3290},{},[3291],{"type":24,"value":2658},{"type":24,"value":2646},{"type":19,"tag":27,"props":3294,"children":3295},{},[3296],{"type":24,"value":2665},{"type":24,"value":3298},") in our component so that the animation take place. We\nwill declare a new component property and assign it one the two states and then create a ",{"type":19,"tag":27,"props":3300,"children":3301},{},[3302],{"type":24,"value":3303},"toggleWiggle()",{"type":24,"value":3305}," method to\nswitch the state to the other one.",{"type":19,"tag":83,"props":3307,"children":3309},{"className":1585,"code":3308,"language":1587,"meta":7,"style":7},"// wiggle-ng-animations-1.component.ts\n@Component({\n selector: 'app-wiggle-ng-animations-1',\n standalone: true,\n imports: [],\n templateUrl: './wiggle-ng-animations-1.component.html',\n styleUrl: './wiggle-ng-animations-1.component.scss',\n animations: [\n // all triggers go here\n ],\n})\nexport class WiggleNgAnimations1Component {\n wiggle = 'start';\n\n toggleWiggle() {\n this.wiggle = this.wiggle == 'start' ? 'end' : 'start';\n }\n}\n",[3310],{"type":19,"tag":59,"props":3311,"children":3312},{"__ignoreMap":7},[3313,3324,3339,3364,3382,3390,3415,3440,3447,3459,3466,3473,3493,3521,3528,3544,3630,3637],{"type":19,"tag":93,"props":3314,"children":3315},{"class":95,"line":96},[3316,3320],{"type":19,"tag":93,"props":3317,"children":3318},{"style":100},[3319],{"type":24,"value":1599},{"type":19,"tag":93,"props":3321,"children":3322},{"style":106},[3323],{"type":24,"value":2692},{"type":19,"tag":93,"props":3325,"children":3326},{"class":95,"line":117},[3327,3331,3335],{"type":19,"tag":93,"props":3328,"children":3329},{"style":1632},[3330],{"type":24,"value":889},{"type":19,"tag":93,"props":3332,"children":3333},{"style":1638},[3334],{"type":24,"value":2499},{"type":19,"tag":93,"props":3336,"children":3337},{"style":138},[3338],{"type":24,"value":2504},{"type":19,"tag":93,"props":3340,"children":3341},{"class":95,"line":158},[3342,3347,3351,3356,3360],{"type":19,"tag":93,"props":3343,"children":3344},{"style":138},[3345],{"type":24,"value":3346}," selector: ",{"type":19,"tag":93,"props":3348,"children":3349},{"style":181},[3350],{"type":24,"value":2016},{"type":19,"tag":93,"props":3352,"children":3353},{"style":187},[3354],{"type":24,"value":3355},"app-wiggle-ng-animations-1",{"type":19,"tag":93,"props":3357,"children":3358},{"style":181},[3359],{"type":24,"value":2016},{"type":19,"tag":93,"props":3361,"children":3362},{"style":138},[3363],{"type":24,"value":2457},{"type":19,"tag":93,"props":3365,"children":3366},{"class":95,"line":300},[3367,3372,3378],{"type":19,"tag":93,"props":3368,"children":3369},{"style":138},[3370],{"type":24,"value":3371}," standalone: ",{"type":19,"tag":93,"props":3373,"children":3375},{"style":3374},"--shiki-default:#FF5874",[3376],{"type":24,"value":3377},"true",{"type":19,"tag":93,"props":3379,"children":3380},{"style":138},[3381],{"type":24,"value":2457},{"type":19,"tag":93,"props":3383,"children":3384},{"class":95,"line":10},[3385],{"type":19,"tag":93,"props":3386,"children":3387},{"style":138},[3388],{"type":24,"value":3389}," imports: [],\n",{"type":19,"tag":93,"props":3391,"children":3392},{"class":95,"line":344},[3393,3398,3402,3407,3411],{"type":19,"tag":93,"props":3394,"children":3395},{"style":138},[3396],{"type":24,"value":3397}," templateUrl: ",{"type":19,"tag":93,"props":3399,"children":3400},{"style":181},[3401],{"type":24,"value":2016},{"type":19,"tag":93,"props":3403,"children":3404},{"style":187},[3405],{"type":24,"value":3406},"./wiggle-ng-animations-1.component.html",{"type":19,"tag":93,"props":3408,"children":3409},{"style":181},[3410],{"type":24,"value":2016},{"type":19,"tag":93,"props":3412,"children":3413},{"style":138},[3414],{"type":24,"value":2457},{"type":19,"tag":93,"props":3416,"children":3417},{"class":95,"line":365},[3418,3423,3427,3432,3436],{"type":19,"tag":93,"props":3419,"children":3420},{"style":138},[3421],{"type":24,"value":3422}," styleUrl: ",{"type":19,"tag":93,"props":3424,"children":3425},{"style":181},[3426],{"type":24,"value":2016},{"type":19,"tag":93,"props":3428,"children":3429},{"style":187},[3430],{"type":24,"value":3431},"./wiggle-ng-animations-1.component.scss",{"type":19,"tag":93,"props":3433,"children":3434},{"style":181},[3435],{"type":24,"value":2016},{"type":19,"tag":93,"props":3437,"children":3438},{"style":138},[3439],{"type":24,"value":2457},{"type":19,"tag":93,"props":3441,"children":3442},{"class":95,"line":387},[3443],{"type":19,"tag":93,"props":3444,"children":3445},{"style":138},[3446],{"type":24,"value":2727},{"type":19,"tag":93,"props":3448,"children":3449},{"class":95,"line":414},[3450,3454],{"type":19,"tag":93,"props":3451,"children":3452},{"style":100},[3453],{"type":24,"value":3042},{"type":19,"tag":93,"props":3455,"children":3456},{"style":106},[3457],{"type":24,"value":3458}," all triggers go here\n",{"type":19,"tag":93,"props":3460,"children":3461},{"class":95,"line":675},[3462],{"type":19,"tag":93,"props":3463,"children":3464},{"style":138},[3465],{"type":24,"value":2936},{"type":19,"tag":93,"props":3467,"children":3468},{"class":95,"line":710},[3469],{"type":19,"tag":93,"props":3470,"children":3471},{"style":138},[3472],{"type":24,"value":2532},{"type":19,"tag":93,"props":3474,"children":3475},{"class":95,"line":731},[3476,3480,3484,3489],{"type":19,"tag":93,"props":3477,"children":3478},{"style":892},[3479],{"type":24,"value":1612},{"type":19,"tag":93,"props":3481,"children":3482},{"style":886},[3483],{"type":24,"value":173},{"type":19,"tag":93,"props":3485,"children":3486},{"style":1619},[3487],{"type":24,"value":3488}," WiggleNgAnimations1Component",{"type":19,"tag":93,"props":3490,"children":3491},{"style":138},[3492],{"type":24,"value":266},{"type":19,"tag":93,"props":3494,"children":3495},{"class":95,"line":753},[3496,3501,3505,3509,3513,3517],{"type":19,"tag":93,"props":3497,"children":3498},{"style":138},[3499],{"type":24,"value":3500}," wiggle ",{"type":19,"tag":93,"props":3502,"children":3503},{"style":886},[3504],{"type":24,"value":178},{"type":19,"tag":93,"props":3506,"children":3507},{"style":181},[3508],{"type":24,"value":2368},{"type":19,"tag":93,"props":3510,"children":3511},{"style":187},[3512],{"type":24,"value":2658},{"type":19,"tag":93,"props":3514,"children":3515},{"style":181},[3516],{"type":24,"value":2016},{"type":19,"tag":93,"props":3518,"children":3519},{"style":138},[3520],{"type":24,"value":297},{"type":19,"tag":93,"props":3522,"children":3523},{"class":95,"line":999},[3524],{"type":19,"tag":93,"props":3525,"children":3526},{"emptyLinePlaceholder":14},[3527],{"type":24,"value":880},{"type":19,"tag":93,"props":3529,"children":3530},{"class":95,"line":1007},[3531,3536,3540],{"type":19,"tag":93,"props":3532,"children":3533},{"style":1638},[3534],{"type":24,"value":3535}," toggleWiggle",{"type":19,"tag":93,"props":3537,"children":3538},{"style":181},[3539],{"type":24,"value":1711},{"type":19,"tag":93,"props":3541,"children":3542},{"style":138},[3543],{"type":24,"value":266},{"type":19,"tag":93,"props":3545,"children":3546},{"class":95,"line":1016},[3547,3551,3555,3559,3563,3568,3572,3576,3581,3585,3589,3593,3598,3602,3606,3610,3614,3618,3622,3626],{"type":19,"tag":93,"props":3548,"children":3549},{"style":121},[3550],{"type":24,"value":1723},{"type":19,"tag":93,"props":3552,"children":3553},{"style":892},[3554],{"type":24,"value":40},{"type":19,"tag":93,"props":3556,"children":3557},{"style":1809},[3558],{"type":24,"value":79},{"type":19,"tag":93,"props":3560,"children":3561},{"style":886},[3562],{"type":24,"value":2421},{"type":19,"tag":93,"props":3564,"children":3565},{"style":121},[3566],{"type":24,"value":3567}," this",{"type":19,"tag":93,"props":3569,"children":3570},{"style":892},[3571],{"type":24,"value":40},{"type":19,"tag":93,"props":3573,"children":3574},{"style":1809},[3575],{"type":24,"value":79},{"type":19,"tag":93,"props":3577,"children":3578},{"style":886},[3579],{"type":24,"value":3580}," ==",{"type":19,"tag":93,"props":3582,"children":3583},{"style":181},[3584],{"type":24,"value":2368},{"type":19,"tag":93,"props":3586,"children":3587},{"style":187},[3588],{"type":24,"value":2658},{"type":19,"tag":93,"props":3590,"children":3591},{"style":181},[3592],{"type":24,"value":2016},{"type":19,"tag":93,"props":3594,"children":3595},{"style":886},[3596],{"type":24,"value":3597}," ?",{"type":19,"tag":93,"props":3599,"children":3600},{"style":181},[3601],{"type":24,"value":2368},{"type":19,"tag":93,"props":3603,"children":3604},{"style":187},[3605],{"type":24,"value":2665},{"type":19,"tag":93,"props":3607,"children":3608},{"style":181},[3609],{"type":24,"value":2016},{"type":19,"tag":93,"props":3611,"children":3612},{"style":886},[3613],{"type":24,"value":1672},{"type":19,"tag":93,"props":3615,"children":3616},{"style":181},[3617],{"type":24,"value":2368},{"type":19,"tag":93,"props":3619,"children":3620},{"style":187},[3621],{"type":24,"value":2658},{"type":19,"tag":93,"props":3623,"children":3624},{"style":181},[3625],{"type":24,"value":2016},{"type":19,"tag":93,"props":3627,"children":3628},{"style":138},[3629],{"type":24,"value":297},{"type":19,"tag":93,"props":3631,"children":3632},{"class":95,"line":1049},[3633],{"type":19,"tag":93,"props":3634,"children":3635},{"style":138},[3636],{"type":24,"value":1272},{"type":19,"tag":93,"props":3638,"children":3639},{"class":95,"line":1057},[3640],{"type":19,"tag":93,"props":3641,"children":3642},{"style":138},[3643],{"type":24,"value":420},{"type":19,"tag":20,"props":3645,"children":3646},{},[3647,3649,3655],{"type":24,"value":3648},"Then in the template we need to attach the animation to the button using ",{"type":19,"tag":59,"props":3650,"children":3652},{"className":3651},[],[3653],{"type":24,"value":3654},"@ANIMATION_TRIGGER",{"type":24,"value":3656}," syntax and also react to\nclick event and toggle the state on the animation:",{"type":19,"tag":83,"props":3658,"children":3660},{"className":85,"code":3659,"language":87,"meta":7,"style":7},"\u003C!-- wiggle-ng-animations-1.component.html -->\n\u003Cdiv>Angular Animations Two States\u003C/div>\n\u003Cbutton\n class=\"button\"\n [@wiggle]=\"wiggle\"\n (click)=\"toggleWiggle()\"\n>Click me!\u003C/button>\n",[3661],{"type":19,"tag":59,"props":3662,"children":3663},{"__ignoreMap":7},[3664,3680,3712,3724,3748,3772,3796],{"type":19,"tag":93,"props":3665,"children":3666},{"class":95,"line":96},[3667,3671,3676],{"type":19,"tag":93,"props":3668,"children":3669},{"style":100},[3670],{"type":24,"value":103},{"type":19,"tag":93,"props":3672,"children":3673},{"style":106},[3674],{"type":24,"value":3675}," wiggle-ng-animations-1.component.html ",{"type":19,"tag":93,"props":3677,"children":3678},{"style":100},[3679],{"type":24,"value":114},{"type":19,"tag":93,"props":3681,"children":3682},{"class":95,"line":117},[3683,3687,3691,3695,3700,3704,3708],{"type":19,"tag":93,"props":3684,"children":3685},{"style":121},[3686],{"type":24,"value":124},{"type":19,"tag":93,"props":3688,"children":3689},{"style":127},[3690],{"type":24,"value":130},{"type":19,"tag":93,"props":3692,"children":3693},{"style":121},[3694],{"type":24,"value":135},{"type":19,"tag":93,"props":3696,"children":3697},{"style":138},[3698],{"type":24,"value":3699},"Angular Animations Two States",{"type":19,"tag":93,"props":3701,"children":3702},{"style":121},[3703],{"type":24,"value":146},{"type":19,"tag":93,"props":3705,"children":3706},{"style":127},[3707],{"type":24,"value":130},{"type":19,"tag":93,"props":3709,"children":3710},{"style":121},[3711],{"type":24,"value":155},{"type":19,"tag":93,"props":3713,"children":3714},{"class":95,"line":158},[3715,3719],{"type":19,"tag":93,"props":3716,"children":3717},{"style":121},[3718],{"type":24,"value":124},{"type":19,"tag":93,"props":3720,"children":3721},{"style":127},[3722],{"type":24,"value":3723},"button\n",{"type":19,"tag":93,"props":3725,"children":3726},{"class":95,"line":300},[3727,3732,3736,3740,3744],{"type":19,"tag":93,"props":3728,"children":3729},{"style":170},[3730],{"type":24,"value":3731}," class",{"type":19,"tag":93,"props":3733,"children":3734},{"style":121},[3735],{"type":24,"value":178},{"type":19,"tag":93,"props":3737,"children":3738},{"style":181},[3739],{"type":24,"value":184},{"type":19,"tag":93,"props":3741,"children":3742},{"style":187},[3743],{"type":24,"value":72},{"type":19,"tag":93,"props":3745,"children":3746},{"style":181},[3747],{"type":24,"value":1507},{"type":19,"tag":93,"props":3749,"children":3750},{"class":95,"line":10},[3751,3756,3760,3764,3768],{"type":19,"tag":93,"props":3752,"children":3753},{"style":170},[3754],{"type":24,"value":3755}," [@wiggle]",{"type":19,"tag":93,"props":3757,"children":3758},{"style":121},[3759],{"type":24,"value":178},{"type":19,"tag":93,"props":3761,"children":3762},{"style":181},[3763],{"type":24,"value":184},{"type":19,"tag":93,"props":3765,"children":3766},{"style":187},[3767],{"type":24,"value":79},{"type":19,"tag":93,"props":3769,"children":3770},{"style":181},[3771],{"type":24,"value":1507},{"type":19,"tag":93,"props":3773,"children":3774},{"class":95,"line":344},[3775,3780,3784,3788,3792],{"type":19,"tag":93,"props":3776,"children":3777},{"style":170},[3778],{"type":24,"value":3779}," (click)",{"type":19,"tag":93,"props":3781,"children":3782},{"style":121},[3783],{"type":24,"value":178},{"type":19,"tag":93,"props":3785,"children":3786},{"style":181},[3787],{"type":24,"value":184},{"type":19,"tag":93,"props":3789,"children":3790},{"style":187},[3791],{"type":24,"value":3303},{"type":19,"tag":93,"props":3793,"children":3794},{"style":181},[3795],{"type":24,"value":1507},{"type":19,"tag":93,"props":3797,"children":3798},{"class":95,"line":365},[3799,3803,3807,3811,3815],{"type":19,"tag":93,"props":3800,"children":3801},{"style":121},[3802],{"type":24,"value":135},{"type":19,"tag":93,"props":3804,"children":3805},{"style":138},[3806],{"type":24,"value":2300},{"type":19,"tag":93,"props":3808,"children":3809},{"style":121},[3810],{"type":24,"value":146},{"type":19,"tag":93,"props":3812,"children":3813},{"style":127},[3814],{"type":24,"value":72},{"type":19,"tag":93,"props":3816,"children":3817},{"style":121},[3818],{"type":24,"value":155},{"type":19,"tag":47,"props":3820,"children":3822},{"id":3821},"angular-animations-single-state",[3823],{"type":24,"value":3824},"Angular Animations - Single state",{"type":19,"tag":20,"props":3826,"children":3827},{},[3828,3830,3835],{"type":24,"value":3829},"Instead of using two states that store the same styles we can use only one and name it ",{"type":19,"tag":27,"props":3831,"children":3832},{},[3833],{"type":24,"value":3834},"default",{"type":24,"value":3836},". Afterward, when\ndeclaring the transition, for the state change expression we will use the wildcard (void) state as the initial and the default\nas we final state of the transition. We will keep the animate method and its keyframes.",{"type":19,"tag":83,"props":3838,"children":3840},{"className":1585,"code":3839,"language":1587,"meta":7,"style":7},"// wiggle-ng-animations-2.component.ts\n@Component({\n ...,\n animations: [\n trigger('wiggle', [\n state(\n 'default',\n style({\n rotate: '0deg',\n })\n ),\n transition(\n '* => default',\n animate(\n '1s',\n keyframes([\n style({ rotate: '-10deg', offset: 0.25 }),\n style({ rotate: '10deg', offset: 0.5 }),\n style({ rotate: '-10deg', offset: 0.75 }),\n ])\n )\n ),\n ]),\n ],\n})\n",[3841],{"type":19,"tag":59,"props":3842,"children":3843},{"__ignoreMap":7},[3844,3856,3871,3882,3889,3916,3927,3946,3957,3980,3987,3994,4005,4025,4036,4055,4066,4101,4136,4171,4178,4186,4194,4202,4210],{"type":19,"tag":93,"props":3845,"children":3846},{"class":95,"line":96},[3847,3851],{"type":19,"tag":93,"props":3848,"children":3849},{"style":100},[3850],{"type":24,"value":1599},{"type":19,"tag":93,"props":3852,"children":3853},{"style":106},[3854],{"type":24,"value":3855}," wiggle-ng-animations-2.component.ts\n",{"type":19,"tag":93,"props":3857,"children":3858},{"class":95,"line":117},[3859,3863,3867],{"type":19,"tag":93,"props":3860,"children":3861},{"style":1632},[3862],{"type":24,"value":889},{"type":19,"tag":93,"props":3864,"children":3865},{"style":1638},[3866],{"type":24,"value":2499},{"type":19,"tag":93,"props":3868,"children":3869},{"style":138},[3870],{"type":24,"value":2504},{"type":19,"tag":93,"props":3872,"children":3873},{"class":95,"line":158},[3874,3878],{"type":19,"tag":93,"props":3875,"children":3876},{"style":121},[3877],{"type":24,"value":2715},{"type":19,"tag":93,"props":3879,"children":3880},{"style":138},[3881],{"type":24,"value":2457},{"type":19,"tag":93,"props":3883,"children":3884},{"class":95,"line":300},[3885],{"type":19,"tag":93,"props":3886,"children":3887},{"style":138},[3888],{"type":24,"value":2727},{"type":19,"tag":93,"props":3890,"children":3891},{"class":95,"line":10},[3892,3896,3900,3904,3908,3912],{"type":19,"tag":93,"props":3893,"children":3894},{"style":1638},[3895],{"type":24,"value":2735},{"type":19,"tag":93,"props":3897,"children":3898},{"style":138},[3899],{"type":24,"value":489},{"type":19,"tag":93,"props":3901,"children":3902},{"style":181},[3903],{"type":24,"value":2016},{"type":19,"tag":93,"props":3905,"children":3906},{"style":187},[3907],{"type":24,"value":79},{"type":19,"tag":93,"props":3909,"children":3910},{"style":181},[3911],{"type":24,"value":2016},{"type":19,"tag":93,"props":3913,"children":3914},{"style":138},[3915],{"type":24,"value":2756},{"type":19,"tag":93,"props":3917,"children":3918},{"class":95,"line":344},[3919,3923],{"type":19,"tag":93,"props":3920,"children":3921},{"style":1638},[3922],{"type":24,"value":2764},{"type":19,"tag":93,"props":3924,"children":3925},{"style":138},[3926],{"type":24,"value":2769},{"type":19,"tag":93,"props":3928,"children":3929},{"class":95,"line":365},[3930,3934,3938,3942],{"type":19,"tag":93,"props":3931,"children":3932},{"style":181},[3933],{"type":24,"value":2777},{"type":19,"tag":93,"props":3935,"children":3936},{"style":187},[3937],{"type":24,"value":3834},{"type":19,"tag":93,"props":3939,"children":3940},{"style":181},[3941],{"type":24,"value":2016},{"type":19,"tag":93,"props":3943,"children":3944},{"style":138},[3945],{"type":24,"value":2457},{"type":19,"tag":93,"props":3947,"children":3948},{"class":95,"line":387},[3949,3953],{"type":19,"tag":93,"props":3950,"children":3951},{"style":1638},[3952],{"type":24,"value":2797},{"type":19,"tag":93,"props":3954,"children":3955},{"style":138},[3956],{"type":24,"value":2504},{"type":19,"tag":93,"props":3958,"children":3959},{"class":95,"line":414},[3960,3964,3968,3972,3976],{"type":19,"tag":93,"props":3961,"children":3962},{"style":138},[3963],{"type":24,"value":2809},{"type":19,"tag":93,"props":3965,"children":3966},{"style":181},[3967],{"type":24,"value":2016},{"type":19,"tag":93,"props":3969,"children":3970},{"style":187},[3971],{"type":24,"value":2818},{"type":19,"tag":93,"props":3973,"children":3974},{"style":181},[3975],{"type":24,"value":2016},{"type":19,"tag":93,"props":3977,"children":3978},{"style":138},[3979],{"type":24,"value":2457},{"type":19,"tag":93,"props":3981,"children":3982},{"class":95,"line":675},[3983],{"type":19,"tag":93,"props":3984,"children":3985},{"style":138},[3986],{"type":24,"value":2834},{"type":19,"tag":93,"props":3988,"children":3989},{"class":95,"line":710},[3990],{"type":19,"tag":93,"props":3991,"children":3992},{"style":138},[3993],{"type":24,"value":2842},{"type":19,"tag":93,"props":3995,"children":3996},{"class":95,"line":731},[3997,4001],{"type":19,"tag":93,"props":3998,"children":3999},{"style":1638},[4000],{"type":24,"value":3055},{"type":19,"tag":93,"props":4002,"children":4003},{"style":138},[4004],{"type":24,"value":2769},{"type":19,"tag":93,"props":4006,"children":4007},{"class":95,"line":753},[4008,4012,4017,4021],{"type":19,"tag":93,"props":4009,"children":4010},{"style":181},[4011],{"type":24,"value":2777},{"type":19,"tag":93,"props":4013,"children":4014},{"style":187},[4015],{"type":24,"value":4016},"* => default",{"type":19,"tag":93,"props":4018,"children":4019},{"style":181},[4020],{"type":24,"value":2016},{"type":19,"tag":93,"props":4022,"children":4023},{"style":138},[4024],{"type":24,"value":2457},{"type":19,"tag":93,"props":4026,"children":4027},{"class":95,"line":999},[4028,4032],{"type":19,"tag":93,"props":4029,"children":4030},{"style":1638},[4031],{"type":24,"value":3087},{"type":19,"tag":93,"props":4033,"children":4034},{"style":138},[4035],{"type":24,"value":2769},{"type":19,"tag":93,"props":4037,"children":4038},{"class":95,"line":1007},[4039,4043,4047,4051],{"type":19,"tag":93,"props":4040,"children":4041},{"style":181},[4042],{"type":24,"value":3099},{"type":19,"tag":93,"props":4044,"children":4045},{"style":187},[4046],{"type":24,"value":3104},{"type":19,"tag":93,"props":4048,"children":4049},{"style":181},[4050],{"type":24,"value":2016},{"type":19,"tag":93,"props":4052,"children":4053},{"style":138},[4054],{"type":24,"value":2457},{"type":19,"tag":93,"props":4056,"children":4057},{"class":95,"line":1016},[4058,4062],{"type":19,"tag":93,"props":4059,"children":4060},{"style":1638},[4061],{"type":24,"value":3120},{"type":19,"tag":93,"props":4063,"children":4064},{"style":138},[4065],{"type":24,"value":3125},{"type":19,"tag":93,"props":4067,"children":4068},{"class":95,"line":1049},[4069,4073,4077,4081,4085,4089,4093,4097],{"type":19,"tag":93,"props":4070,"children":4071},{"style":1638},[4072],{"type":24,"value":3133},{"type":19,"tag":93,"props":4074,"children":4075},{"style":138},[4076],{"type":24,"value":3138},{"type":19,"tag":93,"props":4078,"children":4079},{"style":181},[4080],{"type":24,"value":2016},{"type":19,"tag":93,"props":4082,"children":4083},{"style":187},[4084],{"type":24,"value":3147},{"type":19,"tag":93,"props":4086,"children":4087},{"style":181},[4088],{"type":24,"value":2016},{"type":19,"tag":93,"props":4090,"children":4091},{"style":138},[4092],{"type":24,"value":3156},{"type":19,"tag":93,"props":4094,"children":4095},{"style":283},[4096],{"type":24,"value":3161},{"type":19,"tag":93,"props":4098,"children":4099},{"style":138},[4100],{"type":24,"value":3166},{"type":19,"tag":93,"props":4102,"children":4103},{"class":95,"line":1057},[4104,4108,4112,4116,4120,4124,4128,4132],{"type":19,"tag":93,"props":4105,"children":4106},{"style":1638},[4107],{"type":24,"value":3133},{"type":19,"tag":93,"props":4109,"children":4110},{"style":138},[4111],{"type":24,"value":3138},{"type":19,"tag":93,"props":4113,"children":4114},{"style":181},[4115],{"type":24,"value":2016},{"type":19,"tag":93,"props":4117,"children":4118},{"style":187},[4119],{"type":24,"value":3186},{"type":19,"tag":93,"props":4121,"children":4122},{"style":181},[4123],{"type":24,"value":2016},{"type":19,"tag":93,"props":4125,"children":4126},{"style":138},[4127],{"type":24,"value":3156},{"type":19,"tag":93,"props":4129,"children":4130},{"style":283},[4131],{"type":24,"value":690},{"type":19,"tag":93,"props":4133,"children":4134},{"style":138},[4135],{"type":24,"value":3166},{"type":19,"tag":93,"props":4137,"children":4138},{"class":95,"line":1367},[4139,4143,4147,4151,4155,4159,4163,4167],{"type":19,"tag":93,"props":4140,"children":4141},{"style":1638},[4142],{"type":24,"value":3133},{"type":19,"tag":93,"props":4144,"children":4145},{"style":138},[4146],{"type":24,"value":3138},{"type":19,"tag":93,"props":4148,"children":4149},{"style":181},[4150],{"type":24,"value":2016},{"type":19,"tag":93,"props":4152,"children":4153},{"style":187},[4154],{"type":24,"value":3147},{"type":19,"tag":93,"props":4156,"children":4157},{"style":181},[4158],{"type":24,"value":2016},{"type":19,"tag":93,"props":4160,"children":4161},{"style":138},[4162],{"type":24,"value":3156},{"type":19,"tag":93,"props":4164,"children":4165},{"style":283},[4166],{"type":24,"value":3234},{"type":19,"tag":93,"props":4168,"children":4169},{"style":138},[4170],{"type":24,"value":3166},{"type":19,"tag":93,"props":4172,"children":4173},{"class":95,"line":2939},[4174],{"type":19,"tag":93,"props":4175,"children":4176},{"style":138},[4177],{"type":24,"value":3246},{"type":19,"tag":93,"props":4179,"children":4181},{"class":95,"line":4180},21,[4182],{"type":19,"tag":93,"props":4183,"children":4184},{"style":138},[4185],{"type":24,"value":3254},{"type":19,"tag":93,"props":4187,"children":4189},{"class":95,"line":4188},22,[4190],{"type":19,"tag":93,"props":4191,"children":4192},{"style":138},[4193],{"type":24,"value":2842},{"type":19,"tag":93,"props":4195,"children":4197},{"class":95,"line":4196},23,[4198],{"type":19,"tag":93,"props":4199,"children":4200},{"style":138},[4201],{"type":24,"value":2928},{"type":19,"tag":93,"props":4203,"children":4205},{"class":95,"line":4204},24,[4206],{"type":19,"tag":93,"props":4207,"children":4208},{"style":138},[4209],{"type":24,"value":2936},{"type":19,"tag":93,"props":4211,"children":4213},{"class":95,"line":4212},25,[4214],{"type":19,"tag":93,"props":4215,"children":4216},{"style":138},[4217],{"type":24,"value":2532},{"type":19,"tag":20,"props":4219,"children":4220},{},[4221,4223,4227,4229,4234],{"type":24,"value":4222},"In this case let's implement the 'toggle' logic directly in the template and reset the wiggle property to ",{"type":19,"tag":27,"props":4224,"children":4225},{},[4226],{"type":24,"value":3834},{"type":24,"value":4228},". Since\nthe animation transition is only one way, from void to default, we need to make sure that after the animation ends we reset the state\nback to void. This is why we need to listen for ",{"type":19,"tag":27,"props":4230,"children":4231},{},[4232],{"type":24,"value":4233},"@wiggle.done",{"type":24,"value":4235}," and attach a method that will be triggered when the event happens.",{"type":19,"tag":83,"props":4237,"children":4239},{"className":85,"code":4238,"language":87,"meta":7,"style":7},"\u003C!-- wiggle-ng-animations-2.component.html -->\n\u003Cdiv>Angular Animations Single State\u003C/div>\n\u003Cbutton\n class=\"button\"\n [@wiggle]=\"wiggle\"\n (@wiggle.done)=\"onAnimationDone($event)\"\n (click)=\"wiggle = 'default'\"\n>Click me!\u003C/button>\n",[4240],{"type":19,"tag":59,"props":4241,"children":4242},{"__ignoreMap":7},[4243,4259,4291,4302,4325,4348,4373,4397],{"type":19,"tag":93,"props":4244,"children":4245},{"class":95,"line":96},[4246,4250,4255],{"type":19,"tag":93,"props":4247,"children":4248},{"style":100},[4249],{"type":24,"value":103},{"type":19,"tag":93,"props":4251,"children":4252},{"style":106},[4253],{"type":24,"value":4254}," wiggle-ng-animations-2.component.html ",{"type":19,"tag":93,"props":4256,"children":4257},{"style":100},[4258],{"type":24,"value":114},{"type":19,"tag":93,"props":4260,"children":4261},{"class":95,"line":117},[4262,4266,4270,4274,4279,4283,4287],{"type":19,"tag":93,"props":4263,"children":4264},{"style":121},[4265],{"type":24,"value":124},{"type":19,"tag":93,"props":4267,"children":4268},{"style":127},[4269],{"type":24,"value":130},{"type":19,"tag":93,"props":4271,"children":4272},{"style":121},[4273],{"type":24,"value":135},{"type":19,"tag":93,"props":4275,"children":4276},{"style":138},[4277],{"type":24,"value":4278},"Angular Animations Single State",{"type":19,"tag":93,"props":4280,"children":4281},{"style":121},[4282],{"type":24,"value":146},{"type":19,"tag":93,"props":4284,"children":4285},{"style":127},[4286],{"type":24,"value":130},{"type":19,"tag":93,"props":4288,"children":4289},{"style":121},[4290],{"type":24,"value":155},{"type":19,"tag":93,"props":4292,"children":4293},{"class":95,"line":158},[4294,4298],{"type":19,"tag":93,"props":4295,"children":4296},{"style":121},[4297],{"type":24,"value":124},{"type":19,"tag":93,"props":4299,"children":4300},{"style":127},[4301],{"type":24,"value":3723},{"type":19,"tag":93,"props":4303,"children":4304},{"class":95,"line":300},[4305,4309,4313,4317,4321],{"type":19,"tag":93,"props":4306,"children":4307},{"style":170},[4308],{"type":24,"value":3731},{"type":19,"tag":93,"props":4310,"children":4311},{"style":121},[4312],{"type":24,"value":178},{"type":19,"tag":93,"props":4314,"children":4315},{"style":181},[4316],{"type":24,"value":184},{"type":19,"tag":93,"props":4318,"children":4319},{"style":187},[4320],{"type":24,"value":72},{"type":19,"tag":93,"props":4322,"children":4323},{"style":181},[4324],{"type":24,"value":1507},{"type":19,"tag":93,"props":4326,"children":4327},{"class":95,"line":10},[4328,4332,4336,4340,4344],{"type":19,"tag":93,"props":4329,"children":4330},{"style":170},[4331],{"type":24,"value":3755},{"type":19,"tag":93,"props":4333,"children":4334},{"style":121},[4335],{"type":24,"value":178},{"type":19,"tag":93,"props":4337,"children":4338},{"style":181},[4339],{"type":24,"value":184},{"type":19,"tag":93,"props":4341,"children":4342},{"style":187},[4343],{"type":24,"value":79},{"type":19,"tag":93,"props":4345,"children":4346},{"style":181},[4347],{"type":24,"value":1507},{"type":19,"tag":93,"props":4349,"children":4350},{"class":95,"line":344},[4351,4356,4360,4364,4369],{"type":19,"tag":93,"props":4352,"children":4353},{"style":170},[4354],{"type":24,"value":4355}," (@wiggle.done)",{"type":19,"tag":93,"props":4357,"children":4358},{"style":121},[4359],{"type":24,"value":178},{"type":19,"tag":93,"props":4361,"children":4362},{"style":181},[4363],{"type":24,"value":184},{"type":19,"tag":93,"props":4365,"children":4366},{"style":187},[4367],{"type":24,"value":4368},"onAnimationDone($event)",{"type":19,"tag":93,"props":4370,"children":4371},{"style":181},[4372],{"type":24,"value":1507},{"type":19,"tag":93,"props":4374,"children":4375},{"class":95,"line":365},[4376,4380,4384,4388,4393],{"type":19,"tag":93,"props":4377,"children":4378},{"style":170},[4379],{"type":24,"value":3779},{"type":19,"tag":93,"props":4381,"children":4382},{"style":121},[4383],{"type":24,"value":178},{"type":19,"tag":93,"props":4385,"children":4386},{"style":181},[4387],{"type":24,"value":184},{"type":19,"tag":93,"props":4389,"children":4390},{"style":187},[4391],{"type":24,"value":4392},"wiggle = 'default'",{"type":19,"tag":93,"props":4394,"children":4395},{"style":181},[4396],{"type":24,"value":1507},{"type":19,"tag":93,"props":4398,"children":4399},{"class":95,"line":387},[4400,4404,4408,4412,4416],{"type":19,"tag":93,"props":4401,"children":4402},{"style":121},[4403],{"type":24,"value":135},{"type":19,"tag":93,"props":4405,"children":4406},{"style":138},[4407],{"type":24,"value":2300},{"type":19,"tag":93,"props":4409,"children":4410},{"style":121},[4411],{"type":24,"value":146},{"type":19,"tag":93,"props":4413,"children":4414},{"style":127},[4415],{"type":24,"value":72},{"type":19,"tag":93,"props":4417,"children":4418},{"style":121},[4419],{"type":24,"value":155},{"type":19,"tag":20,"props":4421,"children":4422},{},[4423,4425,4430,4432,4436],{"type":24,"value":4424},"The methods itself will check the 'toState' property on the ",{"type":19,"tag":27,"props":4426,"children":4427},{},[4428],{"type":24,"value":4429},"AnimationEvent",{"type":24,"value":4431}," and will reset it to an empty string if the\nstate is ",{"type":19,"tag":27,"props":4433,"children":4434},{},[4435],{"type":24,"value":3834},{"type":24,"value":4437}," - and this happens when the button is clicked.",{"type":19,"tag":83,"props":4439,"children":4441},{"className":1585,"code":4440,"language":1587,"meta":7,"style":7},"// wiggle-ng-animations-2.component.ts\nexport class WiggleNgAnimations2Component {\n wiggle = '';\n\n onAnimationDone(event: AnimationEvent): void {\n if (event.toState === 'default') {\n this.wiggle = ''; // Reset the state to trigger the animation again\n }\n }\n}\n",[4442],{"type":19,"tag":59,"props":4443,"children":4444},{"__ignoreMap":7},[4445,4456,4476,4496,4503,4547,4591,4629,4636,4643],{"type":19,"tag":93,"props":4446,"children":4447},{"class":95,"line":96},[4448,4452],{"type":19,"tag":93,"props":4449,"children":4450},{"style":100},[4451],{"type":24,"value":1599},{"type":19,"tag":93,"props":4453,"children":4454},{"style":106},[4455],{"type":24,"value":3855},{"type":19,"tag":93,"props":4457,"children":4458},{"class":95,"line":117},[4459,4463,4467,4472],{"type":19,"tag":93,"props":4460,"children":4461},{"style":892},[4462],{"type":24,"value":1612},{"type":19,"tag":93,"props":4464,"children":4465},{"style":886},[4466],{"type":24,"value":173},{"type":19,"tag":93,"props":4468,"children":4469},{"style":1619},[4470],{"type":24,"value":4471}," WiggleNgAnimations2Component",{"type":19,"tag":93,"props":4473,"children":4474},{"style":138},[4475],{"type":24,"value":266},{"type":19,"tag":93,"props":4477,"children":4478},{"class":95,"line":158},[4479,4483,4487,4492],{"type":19,"tag":93,"props":4480,"children":4481},{"style":138},[4482],{"type":24,"value":3500},{"type":19,"tag":93,"props":4484,"children":4485},{"style":886},[4486],{"type":24,"value":178},{"type":19,"tag":93,"props":4488,"children":4489},{"style":181},[4490],{"type":24,"value":4491}," ''",{"type":19,"tag":93,"props":4493,"children":4494},{"style":138},[4495],{"type":24,"value":297},{"type":19,"tag":93,"props":4497,"children":4498},{"class":95,"line":300},[4499],{"type":19,"tag":93,"props":4500,"children":4501},{"emptyLinePlaceholder":14},[4502],{"type":24,"value":880},{"type":19,"tag":93,"props":4504,"children":4505},{"class":95,"line":10},[4506,4511,4515,4520,4524,4529,4534,4538,4543],{"type":19,"tag":93,"props":4507,"children":4508},{"style":1638},[4509],{"type":24,"value":4510}," onAnimationDone",{"type":19,"tag":93,"props":4512,"children":4513},{"style":181},[4514],{"type":24,"value":489},{"type":19,"tag":93,"props":4516,"children":4517},{"style":898},[4518],{"type":24,"value":4519},"event",{"type":19,"tag":93,"props":4521,"children":4522},{"style":121},[4523],{"type":24,"value":256},{"type":19,"tag":93,"props":4525,"children":4526},{"style":1619},[4527],{"type":24,"value":4528}," AnimationEvent",{"type":19,"tag":93,"props":4530,"children":4531},{"style":181},[4532],{"type":24,"value":4533},")",{"type":19,"tag":93,"props":4535,"children":4536},{"style":121},[4537],{"type":24,"value":256},{"type":19,"tag":93,"props":4539,"children":4540},{"style":253},[4541],{"type":24,"value":4542}," void",{"type":19,"tag":93,"props":4544,"children":4545},{"style":138},[4546],{"type":24,"value":266},{"type":19,"tag":93,"props":4548,"children":4549},{"class":95,"line":344},[4550,4555,4560,4564,4569,4574,4578,4582,4586],{"type":19,"tag":93,"props":4551,"children":4552},{"style":886},[4553],{"type":24,"value":4554}," if",{"type":19,"tag":93,"props":4556,"children":4557},{"style":138},[4558],{"type":24,"value":4559}," (event",{"type":19,"tag":93,"props":4561,"children":4562},{"style":892},[4563],{"type":24,"value":40},{"type":19,"tag":93,"props":4565,"children":4566},{"style":1809},[4567],{"type":24,"value":4568},"toState",{"type":19,"tag":93,"props":4570,"children":4571},{"style":886},[4572],{"type":24,"value":4573}," ===",{"type":19,"tag":93,"props":4575,"children":4576},{"style":181},[4577],{"type":24,"value":2368},{"type":19,"tag":93,"props":4579,"children":4580},{"style":187},[4581],{"type":24,"value":3834},{"type":19,"tag":93,"props":4583,"children":4584},{"style":181},[4585],{"type":24,"value":2016},{"type":19,"tag":93,"props":4587,"children":4588},{"style":138},[4589],{"type":24,"value":4590},") {\n",{"type":19,"tag":93,"props":4592,"children":4593},{"class":95,"line":365},[4594,4599,4603,4607,4611,4615,4620,4624],{"type":19,"tag":93,"props":4595,"children":4596},{"style":121},[4597],{"type":24,"value":4598}," this",{"type":19,"tag":93,"props":4600,"children":4601},{"style":892},[4602],{"type":24,"value":40},{"type":19,"tag":93,"props":4604,"children":4605},{"style":1809},[4606],{"type":24,"value":79},{"type":19,"tag":93,"props":4608,"children":4609},{"style":886},[4610],{"type":24,"value":2421},{"type":19,"tag":93,"props":4612,"children":4613},{"style":181},[4614],{"type":24,"value":4491},{"type":19,"tag":93,"props":4616,"children":4617},{"style":138},[4618],{"type":24,"value":4619},"; ",{"type":19,"tag":93,"props":4621,"children":4622},{"style":100},[4623],{"type":24,"value":1599},{"type":19,"tag":93,"props":4625,"children":4626},{"style":106},[4627],{"type":24,"value":4628}," Reset the state to trigger the animation again\n",{"type":19,"tag":93,"props":4630,"children":4631},{"class":95,"line":387},[4632],{"type":19,"tag":93,"props":4633,"children":4634},{"style":138},[4635],{"type":24,"value":956},{"type":19,"tag":93,"props":4637,"children":4638},{"class":95,"line":414},[4639],{"type":19,"tag":93,"props":4640,"children":4641},{"style":138},[4642],{"type":24,"value":1272},{"type":19,"tag":93,"props":4644,"children":4645},{"class":95,"line":675},[4646],{"type":19,"tag":93,"props":4647,"children":4648},{"style":138},[4649],{"type":24,"value":420},{"type":19,"tag":20,"props":4651,"children":4652},{},[4653],{"type":24,"value":4654},"That's pretty much it, we have a wiggle animation implemented in two ways (using plain CSS and Angular Animations).",{"type":19,"tag":47,"props":4656,"children":4658},{"id":4657},"source-code",[4659],{"type":24,"value":4660},"Source Code",{"type":19,"tag":20,"props":4662,"children":4663},{},[4664,4666,4674,4676,4682],{"type":24,"value":4665},"Wrapping everything together - you can check the source code on\n",{"type":19,"tag":4667,"props":4668,"children":4671},"a",{"href":4669,"target":4670},"https://gitlab.com/practical-frontend-content/wiggle-animation-angular","_blank",[4672],{"type":24,"value":4673},"Gitlab",{"type":24,"value":4675},"\nor\n",{"type":19,"tag":4667,"props":4677,"children":4679},{"href":4678,"target":4670},"https://github.com/OwlHowl3/wiggle-animation-angular",[4680],{"type":24,"value":4681},"GitHub",{"type":24,"value":4683},".\nFor a live demo you can check the Stackblitz project below.",{"type":19,"tag":4685,"props":4686,"children":4687},"style",{},[4688],{"type":24,"value":4689},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":117,"depth":117,"links":4691},[4692,4693,4694,4695,4696,4697],{"id":49,"depth":158,"text":52},{"id":1375,"depth":158,"text":1378},{"id":1893,"depth":158,"text":1896},{"id":2315,"depth":158,"text":2318},{"id":3821,"depth":158,"text":3824},{"id":4657,"depth":158,"text":4660},"markdown","content:articles:wiggle-animation.md","content","articles/wiggle-animation.md","md",1757847787749]