├── .editorconfig ├── .gitignore ├── AOS_LICENSE.txt ├── LICENSE ├── README.md ├── blazoranimate.gif ├── global.json ├── releases ├── BlazorAnimate.1.0.0.nupkg ├── BlazorAnimate.2.0.0.nupkg └── BlazorAnimate.3.0.0.nupkg ├── samples ├── BlazorAnimate.Sample.WebAssembly │ ├── App.razor │ ├── BlazorAnimate.Sample.WebAssembly.csproj │ ├── Item.razor │ ├── Pages │ │ ├── Anchoring.razor │ │ ├── Counter.razor │ │ ├── FetchData.razor │ │ ├── Index.razor │ │ └── TestBed.razor │ ├── Program.cs │ ├── Shared │ │ ├── MainLayout.razor │ │ ├── NavMenu.razor │ │ └── SurveyPrompt.razor │ ├── Startup.cs │ ├── _Imports.razor │ └── wwwroot │ │ ├── css │ │ ├── bootstrap │ │ │ ├── bootstrap.min.css │ │ │ └── bootstrap.min.css.map │ │ ├── open-iconic │ │ │ ├── FONT-LICENSE │ │ │ ├── ICON-LICENSE │ │ │ ├── README.md │ │ │ └── font │ │ │ │ ├── css │ │ │ │ └── open-iconic-bootstrap.min.css │ │ │ │ └── fonts │ │ │ │ ├── open-iconic.eot │ │ │ │ ├── open-iconic.otf │ │ │ │ ├── open-iconic.svg │ │ │ │ ├── open-iconic.ttf │ │ │ │ └── open-iconic.woff │ │ └── site.css │ │ ├── index.html │ │ └── sample-data │ │ └── weather.json └── BlazorAnimate.Sample │ ├── App.razor │ ├── BlazorAnimate.Sample.csproj │ ├── Data │ ├── WeatherForecast.cs │ └── WeatherForecastService.cs │ ├── Item.razor │ ├── Pages │ ├── Anchoring.razor │ ├── Counter.razor │ ├── Error.razor │ ├── Index.razor │ ├── Manual.razor │ ├── TestBed.razor │ └── _Host.cshtml │ ├── Program.cs │ ├── Shared │ ├── MainLayout.razor │ └── NavMenu.razor │ ├── Startup.cs │ ├── _Imports.razor │ ├── appsettings.Development.json │ ├── appsettings.json │ └── wwwroot │ ├── css │ ├── bootstrap │ │ ├── bootstrap.min.css │ │ └── bootstrap.min.css.map │ ├── open-iconic │ │ ├── FONT-LICENSE │ │ ├── ICON-LICENSE │ │ ├── README.md │ │ └── font │ │ │ ├── css │ │ │ └── open-iconic-bootstrap.min.css │ │ │ └── fonts │ │ │ ├── open-iconic.eot │ │ │ ├── open-iconic.otf │ │ │ ├── open-iconic.svg │ │ │ ├── open-iconic.ttf │ │ │ └── open-iconic.woff │ └── site.css │ └── favicon.ico └── src ├── BlazorAnimate.sln └── BlazorAnimate ├── Anchor.cs ├── Animate.razor ├── AnimateOptions.cs ├── Animations.cs ├── Animations ├── FadeAnimation.cs ├── FadeDownAnimation.cs ├── FadeDownLeftAnimation.cs ├── FadeDownRightAnimation.cs ├── FadeInAnimation.cs ├── FadeLeftAnimation.cs ├── FadeRightAnimation.cs ├── FadeUpAnimation.cs ├── FadeUpLeftAnimation.cs ├── FadeUpRightAnimation.cs ├── FlipDownAnimation.cs ├── FlipLeftAnimation.cs ├── FlipRightAnimation.cs ├── FlipUpAnimation.cs ├── SlideDownAnimation.cs ├── SlideLeftAnimation.cs ├── SlideRightAnimation.cs ├── SlideUpAnimation.cs ├── ZoomInAnimation.cs ├── ZoomInDownAnimation.cs ├── ZoomInLeftAnimation.cs ├── ZoomInRightAnimation.cs ├── ZoomInUpAnimation.cs ├── ZoomOutAnimation.cs ├── ZoomOutDownAnimation.cs ├── ZoomOutLeftAnimation.cs ├── ZoomOutRightAnimation.cs └── ZoomOutUpAnimation.cs ├── BlazorAnimate.csproj ├── BlazorAnimate.csproj.DotSettings ├── Easings.cs ├── Easings ├── EaseEasing.cs ├── EaseInBackEasing.cs ├── EaseInCubicEasing.cs ├── EaseInEasing.cs ├── EaseInOutBackEasing.cs ├── EaseInOutCubicEasing.cs ├── EaseInOutEasing.cs ├── EaseInOutQuadEasing.cs ├── EaseInOutQuartEasing.cs ├── EaseInOutSineEasing.cs ├── EaseInQuadEasing.cs ├── EaseInQuartEasing.cs ├── EaseInSineEasing.cs ├── EaseOutBackEasing.cs ├── EaseOutCubicEasing.cs ├── EaseOutEasing.cs ├── EaseOutQuadEasing.cs ├── EaseOutQuartEasing.cs ├── EaseOutSineEasing.cs └── LinearEasing.cs ├── IAnimation.cs ├── IEasing.cs ├── _Imports.razor └── wwwroot ├── aos.css └── blazorAnimateInterop.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root=true 2 | # EditorConfig is awesome:http://EditorConfig.org 3 | 4 | # top-most EditorConfig file 5 | root = true 6 | # Don't use tabs for indentation. 7 | [*] 8 | indent_style=space 9 | charset=utf-8 10 | end_of_line=crlf 11 | trim_trailing_whitespace=false 12 | insert_final_newline=false 13 | indent_size=4 14 | 15 | # Microsoft .NET properties 16 | csharp_preferred_modifier_order=public, private, protected, internal, new, abstract, virtual, sealed, override, static, readonly, extern, unsafe, volatile, async:suggestion 17 | dotnet_style_require_accessibility_modifiers=for_non_interface_members:hint 18 | 19 | # ReSharper properties 20 | resharper_autodetect_indent_settings=true 21 | resharper_blank_lines_after_control_transfer_statements=1 22 | resharper_blank_lines_around_block_case_section=1 23 | resharper_blank_lines_around_single_line_local_method=1 24 | resharper_blank_lines_before_block_statements=1 25 | resharper_blank_lines_before_control_transfer_statements=1 26 | resharper_blank_lines_before_multiline_statements=1 27 | resharper_blank_lines_before_single_line_comment=1 28 | resharper_braces_for_for=required 29 | resharper_braces_for_foreach=required 30 | resharper_braces_for_ifelse=required 31 | resharper_braces_for_while=required 32 | resharper_csharp_keep_blank_lines_in_code=1 33 | resharper_csharp_keep_blank_lines_in_declarations=1 34 | resharper_csharp_max_line_length=160 35 | resharper_enforce_line_ending_style=true 36 | resharper_keep_existing_embedded_arrangement=false 37 | resharper_place_simple_embedded_statement_on_same_line=False 38 | resharper_use_indent_from_vs=false 39 | resharper_space_within_single_line_array_initializer_braces=true 40 | resharper_accessor_owner_body=accessors_with_block_body 41 | 42 | # ReSharper inspection severities 43 | resharper_convert_to_null_coalescing_compound_assignment_highlighting=hint 44 | resharper_enforce_foreach_statement_braces_highlighting=error 45 | resharper_enforce_for_statement_braces_highlighting=error 46 | resharper_enforce_if_statement_braces_highlighting=error 47 | resharper_enforce_while_statement_braces_highlighting=error 48 | resharper_identifier_typo_highlighting=none 49 | resharper_redundant_base_qualifier_highlighting=warning 50 | resharper_web_config_module_not_resolved_highlighting=warning 51 | resharper_web_config_type_not_resolved_highlighting=warning 52 | resharper_web_config_wrong_module_highlighting=warning 53 | # (Please don't specify an indent_size here; that has too many unintended consequences.) 54 | 55 | # Code files 56 | [*.{cs,csx,vb,vbx}] 57 | indent_size=4 58 | insert_final_newline=true 59 | 60 | # Xml project files 61 | [*.{csproj,vbproj,vcxproj,vcxproj.filters,proj,projitems,shproj}] 62 | indent_size=2 63 | 64 | # Xml config files 65 | [*.{props,targets,ruleset,config,nuspec,resx,vsixmanifest,vsct}] 66 | indent_size=2 67 | 68 | # JSON files 69 | [*.json] 70 | indent_size=2 71 | 72 | # Dotnet code style settings: 73 | [*.{cs,vb}] 74 | # Sort using and Import directives with System.* appearing first 75 | dotnet_sort_system_directives_first=true 76 | # Avoid "this." and "Me." if not necessary 77 | dotnet_style_qualification_for_field=false:error 78 | dotnet_style_qualification_for_property=false:error 79 | dotnet_style_qualification_for_method=false:error 80 | dotnet_style_qualification_for_event=false:error 81 | 82 | # Use language keywords instead of framework type names for type references 83 | dotnet_style_predefined_type_for_locals_parameters_members=true:suggestion 84 | dotnet_style_predefined_type_for_member_access=true:suggestion 85 | 86 | # Suggest more modern language features when available 87 | dotnet_style_object_initializer=true:suggestion 88 | dotnet_style_collection_initializer=true:suggestion 89 | dotnet_style_coalesce_expression=true:suggestion 90 | dotnet_style_null_propagation=true:suggestion 91 | dotnet_style_explicit_tuple_names=true:suggestion 92 | 93 | dotnet_naming_rule.private_members_with_underscore.symbols=private_fields 94 | dotnet_naming_rule.private_members_with_underscore.style=prefix_underscore 95 | dotnet_naming_rule.private_members_with_underscore.severity=suggestion 96 | 97 | dotnet_naming_symbols.private_fields.applicable_kinds=field 98 | dotnet_naming_symbols.private_fields.applicable_accessibilities=private 99 | 100 | dotnet_naming_style.prefix_underscore.capitalization=camel_case 101 | dotnet_naming_style.prefix_underscore.required_prefix=_ 102 | 103 | # CSharp code style settings: 104 | [*.cs] 105 | # Prefer "var" everywhere 106 | csharp_style_var_for_built_in_types=true:error 107 | csharp_style_var_when_type_is_apparent=true:error 108 | csharp_style_var_elsewhere=true:error 109 | 110 | # Prefer method-like constructs to have a block body 111 | csharp_style_expression_bodied_methods=false:none 112 | csharp_style_expression_bodied_constructors=false:none 113 | csharp_style_expression_bodied_operators=false:none 114 | 115 | # Prefer property-like constructs to have an expression-body 116 | csharp_style_expression_bodied_properties=true:none 117 | csharp_style_expression_bodied_indexers=true:none 118 | csharp_style_expression_bodied_accessors=true:none 119 | 120 | # Suggest more modern language features when available 121 | csharp_style_pattern_matching_over_is_with_cast_check=true:suggestion 122 | csharp_style_pattern_matching_over_as_with_null_check=true:suggestion 123 | csharp_style_inlined_variable_declaration=true:suggestion 124 | csharp_style_throw_expression=true:suggestion 125 | csharp_style_conditional_delegate_call=true:suggestion 126 | 127 | # Newline settings 128 | csharp_new_line_before_open_brace=all 129 | csharp_new_line_before_else=true 130 | csharp_new_line_before_catch=true 131 | csharp_new_line_before_finally=true 132 | csharp_new_line_before_members_in_object_initializers=true 133 | csharp_new_line_before_members_in_anonymous_types=true 134 | csharp_new_line_between_query_expression_clauses=true 135 | 136 | csharp_preserve_single_line_statements=false 137 | csharp_preserve_single_line_blocks=true 138 | 139 | [{.eslintrc,.babelrc,.stylelintrc,jest.config,*.uproject,*.bowerrc,*.jsb3,*.jsb2,*.json}] 140 | indent_style=space 141 | indent_size=2 142 | 143 | [*.{appxmanifest,asax,ascx,aspx,build,cs,cshtml,dtd,master,nuspec,razor,resw,resx,skin,vb,xaml,xamlx,xoml,xsd}] 144 | indent_style=space 145 | indent_size=4 146 | tab_width=4 147 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.suo 8 | *.user 9 | *.userosscache 10 | *.sln.docstates 11 | 12 | # User-specific files (MonoDevelop/Xamarin Studio) 13 | *.userprefs 14 | 15 | # Build results 16 | [Dd]ebug/ 17 | [Dd]ebugPublic/ 18 | [Rr]elease/ 19 | [Rr]eleases/ 20 | x64/ 21 | x86/ 22 | bld/ 23 | [Bb]in/ 24 | [Oo]bj/ 25 | [Ll]og/ 26 | 27 | # Visual Studio 2015/2017 cache/options directory 28 | .vs/ 29 | # Uncomment if you have tasks that create the project's static files in wwwroot 30 | #wwwroot/ 31 | 32 | # Visual Studio 2017 auto generated files 33 | Generated\ Files/ 34 | 35 | # MSTest test Results 36 | [Tt]est[Rr]esult*/ 37 | [Bb]uild[Ll]og.* 38 | 39 | # NUNIT 40 | *.VisualState.xml 41 | TestResult.xml 42 | 43 | # Build Results of an ATL Project 44 | [Dd]ebugPS/ 45 | [Rr]eleasePS/ 46 | dlldata.c 47 | 48 | # Benchmark Results 49 | BenchmarkDotNet.Artifacts/ 50 | 51 | # .NET Core 52 | project.lock.json 53 | project.fragment.lock.json 54 | artifacts/ 55 | **/Properties/launchSettings.json 56 | 57 | # StyleCop 58 | StyleCopReport.xml 59 | 60 | # Files built by Visual Studio 61 | *_i.c 62 | *_p.c 63 | *_i.h 64 | *.ilk 65 | *.meta 66 | *.obj 67 | *.iobj 68 | *.pch 69 | *.pdb 70 | *.ipdb 71 | *.pgc 72 | *.pgd 73 | *.rsp 74 | *.sbr 75 | *.tlb 76 | *.tli 77 | *.tlh 78 | *.tmp 79 | *.tmp_proj 80 | *.log 81 | *.vspscc 82 | *.vssscc 83 | .builds 84 | *.pidb 85 | *.svclog 86 | *.scc 87 | 88 | # Chutzpah Test files 89 | _Chutzpah* 90 | 91 | # Visual C++ cache files 92 | ipch/ 93 | *.aps 94 | *.ncb 95 | *.opendb 96 | *.opensdf 97 | *.sdf 98 | *.cachefile 99 | *.VC.db 100 | *.VC.VC.opendb 101 | 102 | # Visual Studio profiler 103 | *.psess 104 | *.vsp 105 | *.vspx 106 | *.sap 107 | 108 | # Visual Studio Trace Files 109 | *.e2e 110 | 111 | # TFS 2012 Local Workspace 112 | $tf/ 113 | 114 | # Guidance Automation Toolkit 115 | *.gpState 116 | 117 | # ReSharper is a .NET coding add-in 118 | _ReSharper*/ 119 | *.[Rr]e[Ss]harper 120 | *.DotSettings.user 121 | 122 | # JustCode is a .NET coding add-in 123 | .JustCode 124 | 125 | # TeamCity is a build add-in 126 | _TeamCity* 127 | 128 | # DotCover is a Code Coverage Tool 129 | *.dotCover 130 | 131 | # AxoCover is a Code Coverage Tool 132 | .axoCover/* 133 | !.axoCover/settings.json 134 | 135 | # Visual Studio code coverage results 136 | *.coverage 137 | *.coveragexml 138 | 139 | # NCrunch 140 | _NCrunch_* 141 | .*crunch*.local.xml 142 | nCrunchTemp_* 143 | 144 | # MightyMoose 145 | *.mm.* 146 | AutoTest.Net/ 147 | 148 | # Web workbench (sass) 149 | .sass-cache/ 150 | 151 | # Installshield output folder 152 | [Ee]xpress/ 153 | 154 | # DocProject is a documentation generator add-in 155 | DocProject/buildhelp/ 156 | DocProject/Help/*.HxT 157 | DocProject/Help/*.HxC 158 | DocProject/Help/*.hhc 159 | DocProject/Help/*.hhk 160 | DocProject/Help/*.hhp 161 | DocProject/Help/Html2 162 | DocProject/Help/html 163 | 164 | # Click-Once directory 165 | publish/ 166 | 167 | # Publish Web Output 168 | *.[Pp]ublish.xml 169 | *.azurePubxml 170 | # Note: Comment the next line if you want to checkin your web deploy settings, 171 | # but database connection strings (with potential passwords) will be unencrypted 172 | *.pubxml 173 | *.publishproj 174 | 175 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 176 | # checkin your Azure Web App publish settings, but sensitive information contained 177 | # in these scripts will be unencrypted 178 | PublishScripts/ 179 | 180 | # NuGet Packages 181 | *.nupkg 182 | # The packages folder can be ignored because of Package Restore 183 | **/[Pp]ackages/* 184 | # except build/, which is used as an MSBuild target. 185 | !**/[Pp]ackages/build/ 186 | # Uncomment if necessary however generally it will be regenerated when needed 187 | #!**/[Pp]ackages/repositories.config 188 | # NuGet v3's project.json files produces more ignorable files 189 | *.nuget.props 190 | *.nuget.targets 191 | 192 | # Microsoft Azure Build Output 193 | csx/ 194 | *.build.csdef 195 | 196 | # Microsoft Azure Emulator 197 | ecf/ 198 | rcf/ 199 | 200 | # Windows Store app package directories and files 201 | AppPackages/ 202 | BundleArtifacts/ 203 | Package.StoreAssociation.xml 204 | _pkginfo.txt 205 | *.appx 206 | 207 | # Visual Studio cache files 208 | # files ending in .cache can be ignored 209 | *.[Cc]ache 210 | # but keep track of directories ending in .cache 211 | !*.[Cc]ache/ 212 | 213 | # Others 214 | ClientBin/ 215 | ~$* 216 | *~ 217 | *.dbmdl 218 | *.dbproj.schemaview 219 | *.jfm 220 | *.pfx 221 | *.publishsettings 222 | orleans.codegen.cs 223 | 224 | # Including strong name files can present a security risk 225 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 226 | #*.snk 227 | 228 | # Since there are multiple workflows, uncomment next line to ignore bower_components 229 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 230 | #bower_components/ 231 | 232 | # RIA/Silverlight projects 233 | Generated_Code/ 234 | 235 | # Backup & report files from converting an old project file 236 | # to a newer Visual Studio version. Backup files are not needed, 237 | # because we have git ;-) 238 | _UpgradeReport_Files/ 239 | Backup*/ 240 | UpgradeLog*.XML 241 | UpgradeLog*.htm 242 | ServiceFabricBackup/ 243 | *.rptproj.bak 244 | 245 | # SQL Server files 246 | *.mdf 247 | *.ldf 248 | *.ndf 249 | 250 | # Business Intelligence projects 251 | *.rdl.data 252 | *.bim.layout 253 | *.bim_*.settings 254 | *.rptproj.rsuser 255 | 256 | # Microsoft Fakes 257 | FakesAssemblies/ 258 | 259 | # GhostDoc plugin setting file 260 | *.GhostDoc.xml 261 | 262 | # Node.js Tools for Visual Studio 263 | .ntvs_analysis.dat 264 | node_modules/ 265 | 266 | # Visual Studio 6 build log 267 | *.plg 268 | 269 | # Visual Studio 6 workspace options file 270 | *.opt 271 | 272 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 273 | *.vbw 274 | 275 | # Visual Studio LightSwitch build output 276 | **/*.HTMLClient/GeneratedArtifacts 277 | **/*.DesktopClient/GeneratedArtifacts 278 | **/*.DesktopClient/ModelManifest.xml 279 | **/*.Server/GeneratedArtifacts 280 | **/*.Server/ModelManifest.xml 281 | _Pvt_Extensions 282 | 283 | # Paket dependency manager 284 | .paket/paket.exe 285 | paket-files/ 286 | 287 | # FAKE - F# Make 288 | .fake/ 289 | 290 | # JetBrains Rider 291 | .idea/ 292 | *.sln.iml 293 | 294 | # CodeRush 295 | .cr/ 296 | 297 | # Python Tools for Visual Studio (PTVS) 298 | __pycache__/ 299 | *.pyc 300 | 301 | # Cake - Uncomment if you are using it 302 | # tools/** 303 | # !tools/packages.config 304 | 305 | # Tabs Studio 306 | *.tss 307 | 308 | # Telerik's JustMock configuration file 309 | *.jmconfig 310 | 311 | # BizTalk build output 312 | *.btp.cs 313 | *.btm.cs 314 | *.odx.cs 315 | *.xsd.cs 316 | 317 | # OpenCover UI analysis results 318 | OpenCover/ 319 | 320 | # Azure Stream Analytics local run output 321 | ASALocalRun/ 322 | 323 | # MSBuild Binary and Structured Log 324 | *.binlog 325 | 326 | # NVidia Nsight GPU debugger configuration file 327 | *.nvuser 328 | 329 | # MFractors (Xamarin productivity tool) working folder 330 | .mfractor/ 331 | -------------------------------------------------------------------------------- /AOS_LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Michał Sajnóg 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Mikael Koskinen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Now part of Blazorise 2 | 3 | Starting from the 2020/12/1, Blazor.Animate is now proud to be part of the Blazorise: https://github.com/stsrki/Blazorise. All the updates and future work for Blazor.Animate will continue through Blazorise. 4 | 5 | # Blazor.Animate 6 | 7 | Easily add fade, slide and zoom-effects into your Blazor applications. Blazor.Animate is powered by the excellent [AOS-library](https://michalsnik.github.io/aos/). 8 | 9 | ![Blazor.Animate animation](blazoranimate.gif) 10 | 11 | Blazor.Animate is an animation component for Blazor. With Blazor.Animate you can animate how other components are brought to the view. You can easily add fade, slide and zoom-effects and even add easing to the animations. 12 | 13 | [![NuGet](https://img.shields.io/nuget/v/BlazorAnimate.svg)](https://www.nuget.org/packages/BlazorAnimate/) 14 | 15 | ## Quick Start 16 | 17 | To animate a component, wrap it inside Animate-component and use the Animation-parameter to define the animation: 18 | 19 | ``` 20 | 21 | 22 | 23 | ``` 24 | 25 | ## Getting Started 26 | 27 | Few steps are required in order to use the library. 28 | 29 | #### Add NuGet 30 | 31 | ```csharp 32 | Install-Package BlazorAnimate 33 | ``` 34 | 35 | #### Configure _Imports.razor 36 | 37 | ``` 38 | ... 39 | @using BlazorAnimate 40 | ``` 41 | 42 | #### Add JS interop into _Host.cshtml 43 | 44 | ``` 45 | 46 | ``` 47 | 48 | #### Use the Animate-component 49 | 50 | ``` 51 | 52 | 53 | 54 | ``` 55 | 56 | ## Sample 57 | 58 | For a sample, please view http://animateblazorsamplessvc.azurewebsites.net/ 59 | 60 | The sample's source code is available from GitHub: https://github.com/mikoskinen/Blazor.Animate/tree/master/samples/BlazorAnimate.Sample 61 | 62 | ## Running animation manually 63 | 64 | It's possible to run the animation manually. Please note that the animated component will be hidden until the animation is manually executed. 65 | 66 | To animate component manually, first set the IsManual to true and also capture the reference to the component: 67 | 68 | ``` 69 | 70 | 71 | 72 | ``` 73 | 74 | Then in code-behind, call Run-method to animate the component: 75 | 76 | ``` 77 | @code { 78 | 79 | private Animate myAnim; 80 | 81 | private void RunAnimation() 82 | { 83 | myAnim.Run(); 84 | } 85 | } 86 | ``` 87 | 88 | The Manual.razor page in the sample illustrates this functionality. 89 | 90 | ## Animations 91 | 92 | To define an animation, use the Animation-property of the Animate-component. The built-in animations are available from BlazorAnimate.Animations: 93 | 94 | * Fade 95 | * FadeIn 96 | * FadeUp 97 | * FadeDown 98 | * FadeLeft 99 | * FadeRight 100 | * FadeUpRight 101 | * FadeUpLeft 102 | * FadeDownRight 103 | * FadeDownLeft 104 | * FlipUp 105 | * FlipDown 106 | * FlipLeft 107 | * FlipRight 108 | * SlideUp 109 | * SlideDown 110 | * SlideLeft 111 | * SlideRight 112 | * ZoomIn 113 | * ZoomInUp 114 | * ZoomInDown 115 | * ZoomInLeft 116 | * ZoomInRight 117 | * ZoomOut 118 | * ZoomOutUp 119 | * ZoomOutDown 120 | * ZoomOutLeft 121 | * ZoomOutRight 122 | 123 | Use Duration (TimeSpan) or DurationMs -property to define the duration of an animation. 124 | 125 | Use Delay (TimeSpan) or DelayMs -property to define how long the animation is delayed before it is started. 126 | 127 | ## Available easings 128 | 129 | To define an easing for the animation, use the Easing-property of the Animate-component. The built-in easings are available from BlazorAnimate.Easings: 130 | 131 | * Linear 132 | * Ease 133 | * EaseIn 134 | * EaseOut 135 | * EaseInOut 136 | * EaseInBack 137 | * EaseOutBack 138 | * EaseInOutBack 139 | * EaseInSine 140 | * EaseOutSine 141 | * EaseInOutSine 142 | * EaseInQuad 143 | * EaseOutQuad 144 | * EaseInOutQuad 145 | * EaseInCubic 146 | * EaseOutCubic 147 | * EaseInOutCubic 148 | * EaseInQuart 149 | * EaseOutQuart 150 | * EaseInOutQuart 151 | 152 | ## Configuring the defaults 153 | 154 | ASP.NET Core's options can be used to define the default animation settings: 155 | 156 | ``` 157 | services.Configure(options => 158 | { 159 | options.Animation = Animations.FadeDown; 160 | options.Duration = TimeSpan.FromMilliseconds(100); 161 | }); 162 | ``` 163 | 164 | If no animation parameters is defined on the Animate-component, the defaults are used: 165 | 166 | ``` 167 | 168 |

Hello, world!

169 | 170 | ``` 171 | 172 | ## Named configurations 173 | 174 | Blazor.Animate supports named animation settings through the ASP.NET Core's named options. Here's an example where two configurations are provided, one without a name (the defaults) and one with a name: 175 | 176 | ``` 177 | services.Configure("my", options => 178 | { 179 | options.Animation = Animations.FadeDown; 180 | options.Duration = TimeSpan.FromSeconds(2); 181 | }); 182 | 183 | services.Configure(options => 184 | { 185 | options.Animation = Animations.FadeDown; 186 | options.Duration = TimeSpan.FromMilliseconds(100); 187 | }); 188 | ``` 189 | 190 | To use a named configuration, provide the OptionsName-parameter: 191 | 192 | ``` 193 | 194 |

Hello, world!

195 | 196 | ``` 197 | ## Authors 198 | 199 | Blazor.Animate is created by [Mikael Koskinen](https://mikaelkoskinen.net). 200 | 201 | Contributions are welcome! 202 | 203 | ## License 204 | 205 | Blazor.Animate is MIT licensed. The library uses the following other libraries: 206 | 207 | * [AOS](https://michalsnik.github.io/aos/): MIT-license 208 | -------------------------------------------------------------------------------- /blazoranimate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikoskinen/Blazor.Animate/b21038311e3142f347c2d88d2ada0d44fca222e4/blazoranimate.gif -------------------------------------------------------------------------------- /global.json: -------------------------------------------------------------------------------- 1 | { 2 | "sdk": { 3 | "version": "3.1.101", 4 | "rollForward": "latestFeature" 5 | } 6 | } -------------------------------------------------------------------------------- /releases/BlazorAnimate.1.0.0.nupkg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikoskinen/Blazor.Animate/b21038311e3142f347c2d88d2ada0d44fca222e4/releases/BlazorAnimate.1.0.0.nupkg -------------------------------------------------------------------------------- /releases/BlazorAnimate.2.0.0.nupkg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikoskinen/Blazor.Animate/b21038311e3142f347c2d88d2ada0d44fca222e4/releases/BlazorAnimate.2.0.0.nupkg -------------------------------------------------------------------------------- /releases/BlazorAnimate.3.0.0.nupkg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikoskinen/Blazor.Animate/b21038311e3142f347c2d88d2ada0d44fca222e4/releases/BlazorAnimate.3.0.0.nupkg -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/App.razor: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 |

Sorry, there's nothing at this address.

8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/BlazorAnimate.Sample.WebAssembly.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netstandard2.1 5 | 3.0 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/Item.razor: -------------------------------------------------------------------------------- 1 | 
2 | @ChildContent 3 |
4 | 5 | @code { 6 | 7 | [Parameter] 8 | public string ExtraClass { get; set; } 9 | 10 | [Parameter(CaptureUnmatchedValues = true)] 11 | public Dictionary InputAttributes { get; set; } 12 | 13 | [Parameter] 14 | public RenderFragment ChildContent { get; set; } 15 | } 16 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/Pages/Anchoring.razor: -------------------------------------------------------------------------------- 1 | @page "/anchoring" 2 | 3 |

Anchoring example

4 | 5 | Please scroll down to see how anchoring works. With anchors it is possible to use an another HTML element as a trigger for the animation. 6 | 7 | 8 | 9 | LEFT 10 | 11 | 12 | 13 | 14 | 15 | RIGHT 16 | 17 | 18 | 19 | 1 20 | 21 | 2 22 | Triggers left pane when scrolled to the top. Pane isn't automatically hidden when scrolling back. 23 | 24 | 3 25 | 4 26 | 5 27 | 6 28 | 29 | 7 30 | Triggers right pane when scrolled to the center of window. Pane is automatically hidden when scrolled back. 31 | 32 | 8 33 | 9 34 | 10 35 | 11 36 | 12 37 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/Pages/Counter.razor: -------------------------------------------------------------------------------- 1 | @page "/counter" 2 | 3 |

Counter

4 | 5 |

Current count: @currentCount

6 | 7 | 8 | 9 | @code { 10 | private int currentCount = 0; 11 | 12 | private void IncrementCount() 13 | { 14 | currentCount++; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/Pages/FetchData.razor: -------------------------------------------------------------------------------- 1 | @page "/fetchdata" 2 | @inject HttpClient Http 3 | 4 |

Weather forecast

5 | 6 |

This component demonstrates fetching data from the server.

7 | 8 | @if (forecasts == null) 9 | { 10 |

Loading...

11 | } 12 | else 13 | { 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | @foreach (var forecast in forecasts) 25 | { 26 | 27 | 28 | 29 | 30 | 31 | 32 | } 33 | 34 |
DateTemp. (C)Temp. (F)Summary
@forecast.Date.ToShortDateString()@forecast.TemperatureC@forecast.TemperatureF@forecast.Summary
35 | } 36 | 37 | @code { 38 | private WeatherForecast[] forecasts; 39 | 40 | protected override async Task OnInitializedAsync() 41 | { 42 | forecasts = await Http.GetJsonAsync("sample-data/weather.json"); 43 | } 44 | 45 | public class WeatherForecast 46 | { 47 | public DateTime Date { get; set; } 48 | 49 | public int TemperatureC { get; set; } 50 | 51 | public string Summary { get; set; } 52 | 53 | public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/Pages/Index.razor: -------------------------------------------------------------------------------- 1 | @page "/" 2 | 3 | 4 | 5 |

Hello, world!

6 | 7 | Welcome to your new app. 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/Pages/TestBed.razor: -------------------------------------------------------------------------------- 1 | @page "/testbed" 2 | 3 |
4 |
5 | 6 | 12 |
13 |
14 | 15 | 22 |
23 |
24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 |
37 | 38 |
39 | 40 | @CustomRender 41 | 42 | @code { 43 | private RenderFragment CustomRender { get; set; } 44 | private int Delay { get; set; } = 0; 45 | private int Duration { get; set; } = 1000; 46 | private string AnimationName { get; set; } 47 | private List AnimationTypes { get; set; } = new List(); 48 | private string EasingName { get; set; } 49 | private List EasingTypes { get; set; } = new List(); 50 | 51 | private static int count = 1; 52 | 53 | protected override void OnInitialized() 54 | { 55 | CreateAnimationOptions(); 56 | CreateEasingOptions(); 57 | } 58 | 59 | private RenderFragment CreateComponent() => builder => 60 | { 61 | builder.OpenComponent(count * 1); 62 | builder.AddAttribute(count * 2, "DelayMs", Delay); 63 | builder.AddAttribute(count * 3, "DurationMs", Duration); 64 | builder.AddAttribute(count * 4, "Animation", GetAnimationByName(AnimationName)); 65 | var easing = GetEasingByName(EasingName); 66 | if (easing != null) 67 | { 68 | builder.AddAttribute(count * 5, "Easing", easing); 69 | } 70 | 71 | builder.AddAttribute(count * 10, "ChildContent", (MulticastDelegate)CreateChildComponent()); 72 | builder.CloseComponent(); 73 | 74 | count += 1; 75 | }; 76 | 77 | private void RenderComponent() 78 | { 79 | CustomRender = CreateComponent(); 80 | } 81 | 82 | private void CreateAnimationOptions() 83 | { 84 | var properties = typeof(Animations).GetProperties(); 85 | foreach (var prop in properties) 86 | { 87 | AnimationTypes.Add(prop.Name); 88 | } 89 | 90 | AnimationName = AnimationTypes.First(); 91 | } 92 | 93 | private void CreateEasingOptions() 94 | { 95 | var properties = typeof(Easings).GetProperties(); 96 | foreach (var prop in properties) 97 | { 98 | EasingTypes.Add(prop.Name); 99 | } 100 | } 101 | 102 | private IAnimation GetAnimationByName(string name) 103 | { 104 | var animationProp = typeof(Animations).GetProperty(name); 105 | var result = (IAnimation)animationProp.GetValue(null, null); 106 | 107 | return result; 108 | } 109 | 110 | private IEasing GetEasingByName(string name) 111 | { 112 | if (string.IsNullOrWhiteSpace(name)) 113 | { 114 | return null; 115 | } 116 | 117 | var easingProp = typeof(Easings).GetProperty(name); 118 | var result = (IEasing)easingProp.GetValue(null, null); 119 | 120 | return result; 121 | } 122 | 123 | private RenderFragment CreateChildComponent() => builder => 124 | { 125 | builder.OpenComponent(count * 50); 126 | 127 | builder.CloseComponent(); 128 | }; 129 | } -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/Program.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Blazor.Hosting; 2 | 3 | namespace BlazorAnimate.Sample.WebAssembly 4 | { 5 | public class Program 6 | { 7 | public static void Main(string[] args) 8 | { 9 | CreateHostBuilder(args).Build().Run(); 10 | } 11 | 12 | public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) => 13 | BlazorWebAssemblyHost.CreateDefaultBuilder() 14 | .UseBlazorStartup(); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/Shared/MainLayout.razor: -------------------------------------------------------------------------------- 1 | @inherits LayoutComponentBase 2 | 3 |
4 | 5 |
6 | 7 |
8 |
9 | About 10 |
11 | 12 |
13 | @Body 14 |
15 |
16 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/Shared/NavMenu.razor: -------------------------------------------------------------------------------- 1 |
2 | Blazor.Animate 3 | 6 |
7 | 8 |
9 |
    10 |
  • 11 | 12 | Home 13 | 14 |
    • 15 |
  • 16 | 17 | Anchor 18 | 19 |
    • 20 |
  • 21 | 22 | Testbed 23 | 24 |
    • 25 |
26 |
27 | 28 | @code { 29 | private bool collapseNavMenu = true; 30 | 31 | private string NavMenuCssClass => collapseNavMenu ? "collapse" : null; 32 | 33 | private void ToggleNavMenu() 34 | { 35 | collapseNavMenu = !collapseNavMenu; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/Shared/SurveyPrompt.razor: -------------------------------------------------------------------------------- 1 |  11 | 12 | @code { 13 | // Demonstrates how a parent component can supply parameters 14 | [Parameter] 15 | public string Title { get; set; } 16 | } 17 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/Startup.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components.Builder; 2 | using Microsoft.Extensions.DependencyInjection; 3 | 4 | namespace BlazorAnimate.Sample.WebAssembly 5 | { 6 | public class Startup 7 | { 8 | public void ConfigureServices(IServiceCollection services) 9 | { 10 | } 11 | 12 | public void Configure(IComponentsApplicationBuilder app) 13 | { 14 | app.AddComponent("app"); 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using Microsoft.AspNetCore.Components.Forms 3 | @using Microsoft.AspNetCore.Components.Routing 4 | @using Microsoft.AspNetCore.Components.Web 5 | @using Microsoft.JSInterop 6 | @using BlazorAnimate.Sample.WebAssembly 7 | @using BlazorAnimate.Sample.WebAssembly.Shared 8 | @using BlazorAnimate 9 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/wwwroot/css/open-iconic/FONT-LICENSE: -------------------------------------------------------------------------------- 1 | SIL OPEN FONT LICENSE Version 1.1 2 | 3 | Copyright (c) 2014 Waybury 4 | 5 | PREAMBLE 6 | The goals of the Open Font License (OFL) are to stimulate worldwide 7 | development of collaborative font projects, to support the font creation 8 | efforts of academic and linguistic communities, and to provide a free and 9 | open framework in which fonts may be shared and improved in partnership 10 | with others. 11 | 12 | The OFL allows the licensed fonts to be used, studied, modified and 13 | redistributed freely as long as they are not sold by themselves. The 14 | fonts, including any derivative works, can be bundled, embedded, 15 | redistributed and/or sold with any software provided that any reserved 16 | names are not used by derivative works. The fonts and derivatives, 17 | however, cannot be released under any other type of license. The 18 | requirement for fonts to remain under this license does not apply 19 | to any document created using the fonts or their derivatives. 20 | 21 | DEFINITIONS 22 | "Font Software" refers to the set of files released by the Copyright 23 | Holder(s) under this license and clearly marked as such. This may 24 | include source files, build scripts and documentation. 25 | 26 | "Reserved Font Name" refers to any names specified as such after the 27 | copyright statement(s). 28 | 29 | "Original Version" refers to the collection of Font Software components as 30 | distributed by the Copyright Holder(s). 31 | 32 | "Modified Version" refers to any derivative made by adding to, deleting, 33 | or substituting -- in part or in whole -- any of the components of the 34 | Original Version, by changing formats or by porting the Font Software to a 35 | new environment. 36 | 37 | "Author" refers to any designer, engineer, programmer, technical 38 | writer or other person who contributed to the Font Software. 39 | 40 | PERMISSION & CONDITIONS 41 | Permission is hereby granted, free of charge, to any person obtaining 42 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 43 | redistribute, and sell modified and unmodified copies of the Font 44 | Software, subject to the following conditions: 45 | 46 | 1) Neither the Font Software nor any of its individual components, 47 | in Original or Modified Versions, may be sold by itself. 48 | 49 | 2) Original or Modified Versions of the Font Software may be bundled, 50 | redistributed and/or sold with any software, provided that each copy 51 | contains the above copyright notice and this license. These can be 52 | included either as stand-alone text files, human-readable headers or 53 | in the appropriate machine-readable metadata fields within text or 54 | binary files as long as those fields can be easily viewed by the user. 55 | 56 | 3) No Modified Version of the Font Software may use the Reserved Font 57 | Name(s) unless explicit written permission is granted by the corresponding 58 | Copyright Holder. This restriction only applies to the primary font name as 59 | presented to the users. 60 | 61 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 62 | Software shall not be used to promote, endorse or advertise any 63 | Modified Version, except to acknowledge the contribution(s) of the 64 | Copyright Holder(s) and the Author(s) or with their explicit written 65 | permission. 66 | 67 | 5) The Font Software, modified or unmodified, in part or in whole, 68 | must be distributed entirely under this license, and must not be 69 | distributed under any other license. The requirement for fonts to 70 | remain under this license does not apply to any document created 71 | using the Font Software. 72 | 73 | TERMINATION 74 | This license becomes null and void if any of the above conditions are 75 | not met. 76 | 77 | DISCLAIMER 78 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 79 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 80 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 81 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 82 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 83 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 84 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 85 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 86 | OTHER DEALINGS IN THE FONT SOFTWARE. 87 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/wwwroot/css/open-iconic/ICON-LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Waybury 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/wwwroot/css/open-iconic/README.md: -------------------------------------------------------------------------------- 1 | [Open Iconic v1.1.1](http://useiconic.com/open) 2 | =========== 3 | 4 | ### Open Iconic is the open source sibling of [Iconic](http://useiconic.com). It is a hyper-legible collection of 223 icons with a tiny footprint—ready to use with Bootstrap and Foundation. [View the collection](http://useiconic.com/open#icons) 5 | 6 | 7 | 8 | ## What's in Open Iconic? 9 | 10 | * 223 icons designed to be legible down to 8 pixels 11 | * Super-light SVG files - 61.8 for the entire set 12 | * SVG sprite—the modern replacement for icon fonts 13 | * Webfont (EOT, OTF, SVG, TTF, WOFF), PNG and WebP formats 14 | * Webfont stylesheets (including versions for Bootstrap and Foundation) in CSS, LESS, SCSS and Stylus formats 15 | * PNG and WebP raster images in 8px, 16px, 24px, 32px, 48px and 64px. 16 | 17 | 18 | ## Getting Started 19 | 20 | #### For code samples and everything else you need to get started with Open Iconic, check out our [Icons](http://useiconic.com/open#icons) and [Reference](http://useiconic.com/open#reference) sections. 21 | 22 | ### General Usage 23 | 24 | #### Using Open Iconic's SVGs 25 | 26 | We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the `alt` attribute). 27 | 28 | ``` 29 | icon name 30 | ``` 31 | 32 | #### Using Open Iconic's SVG Sprite 33 | 34 | Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack. 35 | 36 | Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `` *tag and a unique class name for each different icon in the* `` *tag.* 37 | 38 | ``` 39 | 40 | 41 | 42 | ``` 43 | 44 | Sizing icons only needs basic CSS. All the icons are in a square format, so just set the `` tag with equal width and height dimensions. 45 | 46 | ``` 47 | .icon { 48 | width: 16px; 49 | height: 16px; 50 | } 51 | ``` 52 | 53 | Coloring icons is even easier. All you need to do is set the `fill` rule on the `` tag. 54 | 55 | ``` 56 | .icon-account-login { 57 | fill: #f00; 58 | } 59 | ``` 60 | 61 | To learn more about SVG Sprites, read [Chris Coyier's guide](http://css-tricks.com/svg-sprites-use-better-icon-fonts/). 62 | 63 | #### Using Open Iconic's Icon Font... 64 | 65 | 66 | ##### …with Bootstrap 67 | 68 | You can find our Bootstrap stylesheets in `font/css/open-iconic-bootstrap.{css, less, scss, styl}` 69 | 70 | 71 | ``` 72 | 73 | ``` 74 | 75 | 76 | ``` 77 | 78 | ``` 79 | 80 | ##### …with Foundation 81 | 82 | You can find our Foundation stylesheets in `font/css/open-iconic-foundation.{css, less, scss, styl}` 83 | 84 | ``` 85 | 86 | ``` 87 | 88 | 89 | ``` 90 | 91 | ``` 92 | 93 | ##### …on its own 94 | 95 | You can find our default stylesheets in `font/css/open-iconic.{css, less, scss, styl}` 96 | 97 | ``` 98 | 99 | ``` 100 | 101 | ``` 102 | 103 | ``` 104 | 105 | 106 | ## License 107 | 108 | ### Icons 109 | 110 | All code (including SVG markup) is under the [MIT License](http://opensource.org/licenses/MIT). 111 | 112 | ### Fonts 113 | 114 | All fonts are under the [SIL Licensed](http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web). 115 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:Icons;src:url(../fonts/open-iconic.eot);src:url(../fonts/open-iconic.eot?#iconic-sm) format('embedded-opentype'),url(../fonts/open-iconic.woff) format('woff'),url(../fonts/open-iconic.ttf) format('truetype'),url(../fonts/open-iconic.otf) format('opentype'),url(../fonts/open-iconic.svg#iconic-sm) format('svg');font-weight:400;font-style:normal}.oi{position:relative;top:1px;display:inline-block;speak:none;font-family:Icons;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.oi:empty:before{width:1em;text-align:center;box-sizing:content-box}.oi.oi-align-center:before{text-align:center}.oi.oi-align-left:before{text-align:left}.oi.oi-align-right:before{text-align:right}.oi.oi-flip-horizontal:before{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.oi.oi-flip-vertical:before{-webkit-transform:scale(1,-1);-ms-transform:scale(-1,1);transform:scale(1,-1)}.oi.oi-flip-horizontal-vertical:before{-webkit-transform:scale(-1,-1);-ms-transform:scale(-1,1);transform:scale(-1,-1)}.oi-account-login:before{content:'\e000'}.oi-account-logout:before{content:'\e001'}.oi-action-redo:before{content:'\e002'}.oi-action-undo:before{content:'\e003'}.oi-align-center:before{content:'\e004'}.oi-align-left:before{content:'\e005'}.oi-align-right:before{content:'\e006'}.oi-aperture:before{content:'\e007'}.oi-arrow-bottom:before{content:'\e008'}.oi-arrow-circle-bottom:before{content:'\e009'}.oi-arrow-circle-left:before{content:'\e00a'}.oi-arrow-circle-right:before{content:'\e00b'}.oi-arrow-circle-top:before{content:'\e00c'}.oi-arrow-left:before{content:'\e00d'}.oi-arrow-right:before{content:'\e00e'}.oi-arrow-thick-bottom:before{content:'\e00f'}.oi-arrow-thick-left:before{content:'\e010'}.oi-arrow-thick-right:before{content:'\e011'}.oi-arrow-thick-top:before{content:'\e012'}.oi-arrow-top:before{content:'\e013'}.oi-audio-spectrum:before{content:'\e014'}.oi-audio:before{content:'\e015'}.oi-badge:before{content:'\e016'}.oi-ban:before{content:'\e017'}.oi-bar-chart:before{content:'\e018'}.oi-basket:before{content:'\e019'}.oi-battery-empty:before{content:'\e01a'}.oi-battery-full:before{content:'\e01b'}.oi-beaker:before{content:'\e01c'}.oi-bell:before{content:'\e01d'}.oi-bluetooth:before{content:'\e01e'}.oi-bold:before{content:'\e01f'}.oi-bolt:before{content:'\e020'}.oi-book:before{content:'\e021'}.oi-bookmark:before{content:'\e022'}.oi-box:before{content:'\e023'}.oi-briefcase:before{content:'\e024'}.oi-british-pound:before{content:'\e025'}.oi-browser:before{content:'\e026'}.oi-brush:before{content:'\e027'}.oi-bug:before{content:'\e028'}.oi-bullhorn:before{content:'\e029'}.oi-calculator:before{content:'\e02a'}.oi-calendar:before{content:'\e02b'}.oi-camera-slr:before{content:'\e02c'}.oi-caret-bottom:before{content:'\e02d'}.oi-caret-left:before{content:'\e02e'}.oi-caret-right:before{content:'\e02f'}.oi-caret-top:before{content:'\e030'}.oi-cart:before{content:'\e031'}.oi-chat:before{content:'\e032'}.oi-check:before{content:'\e033'}.oi-chevron-bottom:before{content:'\e034'}.oi-chevron-left:before{content:'\e035'}.oi-chevron-right:before{content:'\e036'}.oi-chevron-top:before{content:'\e037'}.oi-circle-check:before{content:'\e038'}.oi-circle-x:before{content:'\e039'}.oi-clipboard:before{content:'\e03a'}.oi-clock:before{content:'\e03b'}.oi-cloud-download:before{content:'\e03c'}.oi-cloud-upload:before{content:'\e03d'}.oi-cloud:before{content:'\e03e'}.oi-cloudy:before{content:'\e03f'}.oi-code:before{content:'\e040'}.oi-cog:before{content:'\e041'}.oi-collapse-down:before{content:'\e042'}.oi-collapse-left:before{content:'\e043'}.oi-collapse-right:before{content:'\e044'}.oi-collapse-up:before{content:'\e045'}.oi-command:before{content:'\e046'}.oi-comment-square:before{content:'\e047'}.oi-compass:before{content:'\e048'}.oi-contrast:before{content:'\e049'}.oi-copywriting:before{content:'\e04a'}.oi-credit-card:before{content:'\e04b'}.oi-crop:before{content:'\e04c'}.oi-dashboard:before{content:'\e04d'}.oi-data-transfer-download:before{content:'\e04e'}.oi-data-transfer-upload:before{content:'\e04f'}.oi-delete:before{content:'\e050'}.oi-dial:before{content:'\e051'}.oi-document:before{content:'\e052'}.oi-dollar:before{content:'\e053'}.oi-double-quote-sans-left:before{content:'\e054'}.oi-double-quote-sans-right:before{content:'\e055'}.oi-double-quote-serif-left:before{content:'\e056'}.oi-double-quote-serif-right:before{content:'\e057'}.oi-droplet:before{content:'\e058'}.oi-eject:before{content:'\e059'}.oi-elevator:before{content:'\e05a'}.oi-ellipses:before{content:'\e05b'}.oi-envelope-closed:before{content:'\e05c'}.oi-envelope-open:before{content:'\e05d'}.oi-euro:before{content:'\e05e'}.oi-excerpt:before{content:'\e05f'}.oi-expand-down:before{content:'\e060'}.oi-expand-left:before{content:'\e061'}.oi-expand-right:before{content:'\e062'}.oi-expand-up:before{content:'\e063'}.oi-external-link:before{content:'\e064'}.oi-eye:before{content:'\e065'}.oi-eyedropper:before{content:'\e066'}.oi-file:before{content:'\e067'}.oi-fire:before{content:'\e068'}.oi-flag:before{content:'\e069'}.oi-flash:before{content:'\e06a'}.oi-folder:before{content:'\e06b'}.oi-fork:before{content:'\e06c'}.oi-fullscreen-enter:before{content:'\e06d'}.oi-fullscreen-exit:before{content:'\e06e'}.oi-globe:before{content:'\e06f'}.oi-graph:before{content:'\e070'}.oi-grid-four-up:before{content:'\e071'}.oi-grid-three-up:before{content:'\e072'}.oi-grid-two-up:before{content:'\e073'}.oi-hard-drive:before{content:'\e074'}.oi-header:before{content:'\e075'}.oi-headphones:before{content:'\e076'}.oi-heart:before{content:'\e077'}.oi-home:before{content:'\e078'}.oi-image:before{content:'\e079'}.oi-inbox:before{content:'\e07a'}.oi-infinity:before{content:'\e07b'}.oi-info:before{content:'\e07c'}.oi-italic:before{content:'\e07d'}.oi-justify-center:before{content:'\e07e'}.oi-justify-left:before{content:'\e07f'}.oi-justify-right:before{content:'\e080'}.oi-key:before{content:'\e081'}.oi-laptop:before{content:'\e082'}.oi-layers:before{content:'\e083'}.oi-lightbulb:before{content:'\e084'}.oi-link-broken:before{content:'\e085'}.oi-link-intact:before{content:'\e086'}.oi-list-rich:before{content:'\e087'}.oi-list:before{content:'\e088'}.oi-location:before{content:'\e089'}.oi-lock-locked:before{content:'\e08a'}.oi-lock-unlocked:before{content:'\e08b'}.oi-loop-circular:before{content:'\e08c'}.oi-loop-square:before{content:'\e08d'}.oi-loop:before{content:'\e08e'}.oi-magnifying-glass:before{content:'\e08f'}.oi-map-marker:before{content:'\e090'}.oi-map:before{content:'\e091'}.oi-media-pause:before{content:'\e092'}.oi-media-play:before{content:'\e093'}.oi-media-record:before{content:'\e094'}.oi-media-skip-backward:before{content:'\e095'}.oi-media-skip-forward:before{content:'\e096'}.oi-media-step-backward:before{content:'\e097'}.oi-media-step-forward:before{content:'\e098'}.oi-media-stop:before{content:'\e099'}.oi-medical-cross:before{content:'\e09a'}.oi-menu:before{content:'\e09b'}.oi-microphone:before{content:'\e09c'}.oi-minus:before{content:'\e09d'}.oi-monitor:before{content:'\e09e'}.oi-moon:before{content:'\e09f'}.oi-move:before{content:'\e0a0'}.oi-musical-note:before{content:'\e0a1'}.oi-paperclip:before{content:'\e0a2'}.oi-pencil:before{content:'\e0a3'}.oi-people:before{content:'\e0a4'}.oi-person:before{content:'\e0a5'}.oi-phone:before{content:'\e0a6'}.oi-pie-chart:before{content:'\e0a7'}.oi-pin:before{content:'\e0a8'}.oi-play-circle:before{content:'\e0a9'}.oi-plus:before{content:'\e0aa'}.oi-power-standby:before{content:'\e0ab'}.oi-print:before{content:'\e0ac'}.oi-project:before{content:'\e0ad'}.oi-pulse:before{content:'\e0ae'}.oi-puzzle-piece:before{content:'\e0af'}.oi-question-mark:before{content:'\e0b0'}.oi-rain:before{content:'\e0b1'}.oi-random:before{content:'\e0b2'}.oi-reload:before{content:'\e0b3'}.oi-resize-both:before{content:'\e0b4'}.oi-resize-height:before{content:'\e0b5'}.oi-resize-width:before{content:'\e0b6'}.oi-rss-alt:before{content:'\e0b7'}.oi-rss:before{content:'\e0b8'}.oi-script:before{content:'\e0b9'}.oi-share-boxed:before{content:'\e0ba'}.oi-share:before{content:'\e0bb'}.oi-shield:before{content:'\e0bc'}.oi-signal:before{content:'\e0bd'}.oi-signpost:before{content:'\e0be'}.oi-sort-ascending:before{content:'\e0bf'}.oi-sort-descending:before{content:'\e0c0'}.oi-spreadsheet:before{content:'\e0c1'}.oi-star:before{content:'\e0c2'}.oi-sun:before{content:'\e0c3'}.oi-tablet:before{content:'\e0c4'}.oi-tag:before{content:'\e0c5'}.oi-tags:before{content:'\e0c6'}.oi-target:before{content:'\e0c7'}.oi-task:before{content:'\e0c8'}.oi-terminal:before{content:'\e0c9'}.oi-text:before{content:'\e0ca'}.oi-thumb-down:before{content:'\e0cb'}.oi-thumb-up:before{content:'\e0cc'}.oi-timer:before{content:'\e0cd'}.oi-transfer:before{content:'\e0ce'}.oi-trash:before{content:'\e0cf'}.oi-underline:before{content:'\e0d0'}.oi-vertical-align-bottom:before{content:'\e0d1'}.oi-vertical-align-center:before{content:'\e0d2'}.oi-vertical-align-top:before{content:'\e0d3'}.oi-video:before{content:'\e0d4'}.oi-volume-high:before{content:'\e0d5'}.oi-volume-low:before{content:'\e0d6'}.oi-volume-off:before{content:'\e0d7'}.oi-warning:before{content:'\e0d8'}.oi-wifi:before{content:'\e0d9'}.oi-wrench:before{content:'\e0da'}.oi-x:before{content:'\e0db'}.oi-yen:before{content:'\e0dc'}.oi-zoom-in:before{content:'\e0dd'}.oi-zoom-out:before{content:'\e0de'} -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikoskinen/Blazor.Animate/b21038311e3142f347c2d88d2ada0d44fca222e4/samples/BlazorAnimate.Sample.WebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.eot -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikoskinen/Blazor.Animate/b21038311e3142f347c2d88d2ada0d44fca222e4/samples/BlazorAnimate.Sample.WebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.otf -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikoskinen/Blazor.Animate/b21038311e3142f347c2d88d2ada0d44fca222e4/samples/BlazorAnimate.Sample.WebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikoskinen/Blazor.Animate/b21038311e3142f347c2d88d2ada0d44fca222e4/samples/BlazorAnimate.Sample.WebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.woff -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/wwwroot/css/site.css: -------------------------------------------------------------------------------- 1 | @import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); 2 | 3 | html, body { 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | a, .btn-link { 8 | color: #0366d6; 9 | } 10 | 11 | .btn-primary { 12 | color: #fff; 13 | background-color: #1b6ec2; 14 | border-color: #1861ac; 15 | } 16 | 17 | app { 18 | position: relative; 19 | display: flex; 20 | flex-direction: column; 21 | } 22 | 23 | .top-row { 24 | height: 3.5rem; 25 | display: flex; 26 | align-items: center; 27 | } 28 | 29 | .main { 30 | flex: 1; 31 | } 32 | 33 | .main .top-row { 34 | background-color: #f7f7f7; 35 | border-bottom: 1px solid #d6d5d5; 36 | justify-content: flex-end; 37 | } 38 | 39 | .main .top-row > a, .main .top-row .btn-link { 40 | white-space: nowrap; 41 | margin-left: 1.5rem; 42 | } 43 | 44 | .main .top-row a:first-child { 45 | overflow: hidden; 46 | text-overflow: ellipsis; 47 | } 48 | 49 | .sidebar { 50 | background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); 51 | } 52 | 53 | .sidebar .top-row { 54 | background-color: rgba(0,0,0,0.4); 55 | } 56 | 57 | .sidebar .navbar-brand { 58 | font-size: 1.1rem; 59 | } 60 | 61 | .sidebar .oi { 62 | width: 2rem; 63 | font-size: 1.1rem; 64 | vertical-align: text-top; 65 | top: -2px; 66 | } 67 | 68 | .sidebar .nav-item { 69 | font-size: 0.9rem; 70 | padding-bottom: 0.5rem; 71 | } 72 | 73 | .sidebar .nav-item:first-of-type { 74 | padding-top: 1rem; 75 | } 76 | 77 | .sidebar .nav-item:last-of-type { 78 | padding-bottom: 1rem; 79 | } 80 | 81 | .sidebar .nav-item a { 82 | color: #d7d7d7; 83 | border-radius: 4px; 84 | height: 3rem; 85 | display: flex; 86 | align-items: center; 87 | line-height: 3rem; 88 | } 89 | 90 | .sidebar .nav-item a.active { 91 | background-color: rgba(255,255,255,0.25); 92 | color: white; 93 | } 94 | 95 | .sidebar .nav-item a:hover { 96 | background-color: rgba(255,255,255,0.1); 97 | color: white; 98 | } 99 | 100 | .content { 101 | padding-top: 1.1rem; 102 | } 103 | 104 | .navbar-toggler { 105 | background-color: rgba(255, 255, 255, 0.1); 106 | } 107 | 108 | .valid.modified:not([type=checkbox]) { 109 | outline: 1px solid #26b050; 110 | } 111 | 112 | .invalid { 113 | outline: 1px solid red; 114 | } 115 | 116 | .validation-message { 117 | color: red; 118 | } 119 | 120 | #blazor-error-ui { 121 | background: lightyellow; 122 | bottom: 0; 123 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); 124 | display: none; 125 | left: 0; 126 | padding: 0.6rem 1.25rem 0.7rem 1.25rem; 127 | position: fixed; 128 | width: 100%; 129 | z-index: 1000; 130 | } 131 | 132 | #blazor-error-ui .dismiss { 133 | cursor: pointer; 134 | position: absolute; 135 | right: 0.75rem; 136 | top: 0.5rem; 137 | } 138 | 139 | @media (max-width: 767.98px) { 140 | .main .top-row:not(.auth) { 141 | display: none; 142 | } 143 | 144 | .main .top-row.auth { 145 | justify-content: space-between; 146 | } 147 | 148 | .main .top-row a, .main .top-row .btn-link { 149 | margin-left: 0; 150 | } 151 | } 152 | 153 | @media (min-width: 768px) { 154 | app { 155 | flex-direction: row; 156 | } 157 | 158 | .sidebar { 159 | width: 250px; 160 | height: 100vh; 161 | position: sticky; 162 | top: 0; 163 | } 164 | 165 | .main .top-row { 166 | position: sticky; 167 | top: 0; 168 | } 169 | 170 | .main > div { 171 | padding-left: 2rem !important; 172 | padding-right: 1.5rem !important; 173 | } 174 | 175 | .navbar-toggler { 176 | display: none; 177 | } 178 | 179 | .sidebar .collapse { 180 | /* Never collapse the sidebar for wide screens */ 181 | display: block; 182 | } 183 | } 184 | 185 | .item { 186 | width: 200px; 187 | margin: 50px auto; 188 | max-height: 250px; 189 | padding: 35px 20px; 190 | background: #ccc; 191 | text-align: center; 192 | color: #FFF; 193 | font-size: 3em; 194 | } 195 | 196 | .item span { 197 | display: block; 198 | font-size: 1rem; 199 | } 200 | 201 | .left-pane { 202 | position: fixed; 203 | top: 0; 204 | bottom: 0; 205 | margin: auto; 206 | left: 30%; 207 | background: red; 208 | } 209 | 210 | .right-pane { 211 | position: fixed; 212 | top: 0; 213 | bottom: 0; 214 | margin: auto; 215 | right: 20%; 216 | background: green; 217 | } -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/wwwroot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BlazorAnimate.Sample.WebAssembly 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Loading... 16 | 17 |
18 | An unhandled error has occurred. 19 | Reload 20 | 🗙 21 |
22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample.WebAssembly/wwwroot/sample-data/weather.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "date": "2018-05-06", 4 | "temperatureC": 1, 5 | "summary": "Freezing", 6 | "temperatureF": 33 7 | }, 8 | { 9 | "date": "2018-05-07", 10 | "temperatureC": 14, 11 | "summary": "Bracing", 12 | "temperatureF": 57 13 | }, 14 | { 15 | "date": "2018-05-08", 16 | "temperatureC": -13, 17 | "summary": "Freezing", 18 | "temperatureF": 9 19 | }, 20 | { 21 | "date": "2018-05-09", 22 | "temperatureC": -16, 23 | "summary": "Balmy", 24 | "temperatureF": 4 25 | }, 26 | { 27 | "date": "2018-05-10", 28 | "temperatureC": -2, 29 | "summary": "Chilly", 30 | "temperatureF": 29 31 | } 32 | ] 33 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/App.razor: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 |

Sorry, there's nothing at this address.

8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/BlazorAnimate.Sample.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netcoreapp3.1 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/Data/WeatherForecast.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | 3 | namespace BlazorApp9.Data 4 | { 5 | public class WeatherForecast 6 | { 7 | public DateTime Date { get; set; } 8 | 9 | public int TemperatureC { get; set; } 10 | 11 | public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); 12 | 13 | public string Summary { get; set; } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/Data/WeatherForecastService.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Linq; 3 | using System.Threading.Tasks; 4 | 5 | namespace BlazorApp9.Data 6 | { 7 | public class WeatherForecastService 8 | { 9 | private static readonly string[] Summaries = new[] 10 | { 11 | "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" 12 | }; 13 | 14 | public Task GetForecastAsync(DateTime startDate) 15 | { 16 | var rng = new Random(); 17 | return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast 18 | { 19 | Date = startDate.AddDays(index), 20 | TemperatureC = rng.Next(-20, 55), 21 | Summary = Summaries[rng.Next(Summaries.Length)] 22 | }).ToArray()); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/Item.razor: -------------------------------------------------------------------------------- 1 | 
2 | @ChildContent 3 |
4 | 5 | @code { 6 | 7 | [Parameter] 8 | public string ExtraClass { get; set; } 9 | 10 | [Parameter(CaptureUnmatchedValues = true)] 11 | public Dictionary InputAttributes { get; set; } 12 | 13 | [Parameter] 14 | public RenderFragment ChildContent { get; set; } 15 | } 16 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/Pages/Anchoring.razor: -------------------------------------------------------------------------------- 1 | @page "/anchoring" 2 | 3 |

Anchoring example

4 | 5 | Please scroll down to see how anchoring works. With anchors it is possible to use an another HTML element as a trigger for the animation. 6 | 7 | 8 | 9 | LEFT 10 | 11 | 12 | 13 | 14 | 15 | RIGHT 16 | 17 | 18 | 19 | 1 20 | 21 | 2 22 | Triggers left pane when scrolled to the top. Pane isn't automatically hidden when scrolling back. 23 | 24 | 3 25 | 4 26 | 5 27 | 6 28 | 29 | 7 30 | Triggers right pane when scrolled to the center of window. Pane is automatically hidden when scrolled back. 31 | 32 | 8 33 | 9 34 | 10 35 | 11 36 | 12 37 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/Pages/Counter.razor: -------------------------------------------------------------------------------- 1 | @page "/counter" 2 | 3 |

Counter

4 | 5 |

Current count: @currentCount

6 | 7 | 8 | 9 | @code { 10 | int currentCount = 0; 11 | 12 | void IncrementCount() 13 | { 14 | currentCount++; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/Pages/Error.razor: -------------------------------------------------------------------------------- 1 | @page "/error" 2 | 3 | 4 |

Error.

5 |

An error occurred while processing your request.

6 | 7 |

Development Mode

8 |

9 | Swapping to Development environment will display more detailed information about the error that occurred. 10 |

11 |

12 | The Development environment shouldn't be enabled for deployed applications. 13 | It can result in displaying sensitive information from exceptions to end users. 14 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 15 | and restarting the app. 16 |

-------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/Pages/Index.razor: -------------------------------------------------------------------------------- 1 | @page "/" 2 | 3 | 4 | 5 |

Hello, world!

6 | 7 | Welcome to your new app. 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/Pages/Manual.razor: -------------------------------------------------------------------------------- 1 | @page "/manual" 2 | 3 |

Manual example

4 | 5 |

6 | This sample shows how animation can be executed by clicking a button by setting the IsManual of the Animate component to true and then running the animation using Run-method. 7 |

8 | 9 |
10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | @code { 20 | 21 | private Animate myAnim; 22 | 23 | private void RunAnimation() 24 | { 25 | myAnim.Run(); 26 | } 27 | } -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/Pages/TestBed.razor: -------------------------------------------------------------------------------- 1 | @page "/testbed" 2 | 3 |
4 |
5 | 6 | 12 |
13 |
14 | 15 | 22 |
23 |
24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 |
37 | 38 |
39 | 40 | @CustomRender 41 | 42 | @code { 43 | private RenderFragment CustomRender { get; set; } 44 | private int Delay { get; set; } = 0; 45 | private int Duration { get; set; } = 1000; 46 | private string AnimationName { get; set; } 47 | private List AnimationTypes { get; set; } = new List(); 48 | private string EasingName { get; set; } 49 | private List EasingTypes { get; set; } = new List(); 50 | 51 | private static int count = 1; 52 | 53 | protected override void OnInitialized() 54 | { 55 | CreateAnimationOptions(); 56 | CreateEasingOptions(); 57 | } 58 | 59 | private RenderFragment CreateComponent() => builder => 60 | { 61 | builder.OpenComponent(count * 1); 62 | builder.AddAttribute(count * 2, "DelayMs", Delay); 63 | builder.AddAttribute(count * 3, "DurationMs", Duration); 64 | builder.AddAttribute(count * 4, "Animation", GetAnimationByName(AnimationName)); 65 | var easing = GetEasingByName(EasingName); 66 | if (easing != null) 67 | { 68 | builder.AddAttribute(count * 5, "Easing", easing); 69 | } 70 | 71 | builder.AddAttribute(count * 10, "ChildContent", (MulticastDelegate)CreateChildComponent()); 72 | builder.CloseComponent(); 73 | 74 | count += 1; 75 | }; 76 | 77 | private void RenderComponent() 78 | { 79 | CustomRender = CreateComponent(); 80 | } 81 | 82 | private void CreateAnimationOptions() 83 | { 84 | var properties = typeof(Animations).GetProperties(); 85 | foreach (var prop in properties) 86 | { 87 | AnimationTypes.Add(prop.Name); 88 | } 89 | 90 | AnimationName = AnimationTypes.First(); 91 | } 92 | 93 | private void CreateEasingOptions() 94 | { 95 | var properties = typeof(Easings).GetProperties(); 96 | foreach (var prop in properties) 97 | { 98 | EasingTypes.Add(prop.Name); 99 | } 100 | } 101 | 102 | private IAnimation GetAnimationByName(string name) 103 | { 104 | var animationProp = typeof(Animations).GetProperty(name); 105 | var result = (IAnimation)animationProp.GetValue(null, null); 106 | 107 | return result; 108 | } 109 | 110 | private IEasing GetEasingByName(string name) 111 | { 112 | if (string.IsNullOrWhiteSpace(name)) 113 | { 114 | return null; 115 | } 116 | 117 | var easingProp = typeof(Easings).GetProperty(name); 118 | var result = (IEasing)easingProp.GetValue(null, null); 119 | 120 | return result; 121 | } 122 | 123 | private RenderFragment CreateChildComponent() => builder => 124 | { 125 | builder.OpenComponent(count * 50); 126 | 127 | builder.CloseComponent(); 128 | }; 129 | } -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/Pages/_Host.cshtml: -------------------------------------------------------------------------------- 1 | @page "/" 2 | @using BlazorAnimate.Sample 3 | @namespace BlazorAnimate.Pages 4 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 5 | 6 | 7 | 8 | 9 | 10 | 11 | Blazor.Animate Samples 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | @(await Html.RenderComponentAsync(RenderMode.Server)) 20 | 21 | 22 | 23 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/Program.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.IO; 4 | using System.Linq; 5 | using System.Threading.Tasks; 6 | using Microsoft.AspNetCore; 7 | using Microsoft.AspNetCore.Hosting; 8 | using Microsoft.Extensions.Configuration; 9 | using Microsoft.Extensions.Hosting; 10 | using Microsoft.Extensions.Logging; 11 | 12 | namespace BlazorAnimate.Sample 13 | { 14 | public class Program 15 | { 16 | public static void Main(string[] args) 17 | { 18 | CreateHostBuilder(args).Build().Run(); 19 | } 20 | 21 | public static IHostBuilder CreateHostBuilder(string[] args) => 22 | Host.CreateDefaultBuilder(args) 23 | .ConfigureWebHostDefaults(webBuilder => 24 | { 25 | webBuilder.UseStartup(); 26 | }); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/Shared/MainLayout.razor: -------------------------------------------------------------------------------- 1 | @inherits LayoutComponentBase 2 | 3 |
4 | 5 |
6 | 7 |
8 |
9 | About 10 |
11 | 12 |
13 | @Body 14 |
15 |
16 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/Shared/NavMenu.razor: -------------------------------------------------------------------------------- 1 |
2 | Blazor.Animate 3 | 6 |
7 | 8 |
9 |
    10 |
  • 11 | 12 | Home 13 | 14 |
    • 15 |
  • 16 | 17 | Manual 18 | 19 |
    • 20 |
  • 21 | 22 | Anchor 23 | 24 |
    • 25 |
  • 26 | 27 | Testbed 28 | 29 |
    • 30 |
31 |
32 | 33 | @code { 34 | bool collapseNavMenu = true; 35 | 36 | string NavMenuCssClass => collapseNavMenu ? "collapse" : null; 37 | 38 | void ToggleNavMenu() 39 | { 40 | collapseNavMenu = !collapseNavMenu; 41 | } 42 | 43 | } -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/Startup.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Threading.Tasks; 5 | using Microsoft.AspNetCore.Builder; 6 | using Microsoft.AspNetCore.Components; 7 | using Microsoft.AspNetCore.Hosting; 8 | using Microsoft.AspNetCore.HttpsPolicy; 9 | using Microsoft.Extensions.Configuration; 10 | using Microsoft.Extensions.DependencyInjection; 11 | using Microsoft.Extensions.Hosting; 12 | using BlazorApp9.Data; 13 | 14 | namespace BlazorAnimate.Sample 15 | { 16 | public class Startup 17 | { 18 | public Startup(IConfiguration configuration) 19 | { 20 | Configuration = configuration; 21 | } 22 | 23 | public IConfiguration Configuration { get; } 24 | 25 | // This method gets called by the runtime. Use this method to add services to the container. 26 | // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940 27 | public void ConfigureServices(IServiceCollection services) 28 | { 29 | services.AddRazorPages(); 30 | services.AddServerSideBlazor(); 31 | services.AddSingleton(); 32 | 33 | services.Configure("my", options => 34 | { 35 | options.Mirror = true; 36 | options.Animation = Animations.FadeDown; 37 | options.Duration = TimeSpan.FromSeconds(2); 38 | }); 39 | 40 | services.Configure(options => 41 | { 42 | options.Mirror = true; 43 | options.Animation = Animations.FadeDown; 44 | options.Duration = TimeSpan.FromMilliseconds(100); 45 | }); 46 | } 47 | 48 | // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. 49 | public void Configure(IApplicationBuilder app, IWebHostEnvironment env) 50 | { 51 | if (env.IsDevelopment()) 52 | { 53 | app.UseDeveloperExceptionPage(); 54 | } 55 | else 56 | { 57 | app.UseExceptionHandler("/Error"); 58 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. 59 | app.UseHsts(); 60 | } 61 | 62 | app.UseHttpsRedirection(); 63 | app.UseStaticFiles(); 64 | 65 | app.UseRouting(); 66 | 67 | app.UseEndpoints(endpoints => 68 | { 69 | endpoints.MapBlazorHub(); 70 | endpoints.MapFallbackToPage("/_Host"); 71 | }); 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using Microsoft.AspNetCore.Authorization 3 | @using Microsoft.AspNetCore.Components.Authorization 4 | @using Microsoft.AspNetCore.Components.Forms 5 | @using Microsoft.AspNetCore.Components.Routing 6 | @using Microsoft.AspNetCore.Components.Web 7 | @using Microsoft.JSInterop 8 | @using BlazorAnimate.Sample 9 | @using BlazorAnimate.Sample.Shared 10 | @using BlazorAnimate -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/appsettings.Development.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Debug", 5 | "System": "Information", 6 | "Microsoft": "Information" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/appsettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Information", 5 | "Microsoft": "Warning", 6 | "Microsoft.Hosting.Lifetime": "Information" 7 | } 8 | }, 9 | "AllowedHosts": "*" 10 | } 11 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/wwwroot/css/open-iconic/FONT-LICENSE: -------------------------------------------------------------------------------- 1 | SIL OPEN FONT LICENSE Version 1.1 2 | 3 | Copyright (c) 2014 Waybury 4 | 5 | PREAMBLE 6 | The goals of the Open Font License (OFL) are to stimulate worldwide 7 | development of collaborative font projects, to support the font creation 8 | efforts of academic and linguistic communities, and to provide a free and 9 | open framework in which fonts may be shared and improved in partnership 10 | with others. 11 | 12 | The OFL allows the licensed fonts to be used, studied, modified and 13 | redistributed freely as long as they are not sold by themselves. The 14 | fonts, including any derivative works, can be bundled, embedded, 15 | redistributed and/or sold with any software provided that any reserved 16 | names are not used by derivative works. The fonts and derivatives, 17 | however, cannot be released under any other type of license. The 18 | requirement for fonts to remain under this license does not apply 19 | to any document created using the fonts or their derivatives. 20 | 21 | DEFINITIONS 22 | "Font Software" refers to the set of files released by the Copyright 23 | Holder(s) under this license and clearly marked as such. This may 24 | include source files, build scripts and documentation. 25 | 26 | "Reserved Font Name" refers to any names specified as such after the 27 | copyright statement(s). 28 | 29 | "Original Version" refers to the collection of Font Software components as 30 | distributed by the Copyright Holder(s). 31 | 32 | "Modified Version" refers to any derivative made by adding to, deleting, 33 | or substituting -- in part or in whole -- any of the components of the 34 | Original Version, by changing formats or by porting the Font Software to a 35 | new environment. 36 | 37 | "Author" refers to any designer, engineer, programmer, technical 38 | writer or other person who contributed to the Font Software. 39 | 40 | PERMISSION & CONDITIONS 41 | Permission is hereby granted, free of charge, to any person obtaining 42 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 43 | redistribute, and sell modified and unmodified copies of the Font 44 | Software, subject to the following conditions: 45 | 46 | 1) Neither the Font Software nor any of its individual components, 47 | in Original or Modified Versions, may be sold by itself. 48 | 49 | 2) Original or Modified Versions of the Font Software may be bundled, 50 | redistributed and/or sold with any software, provided that each copy 51 | contains the above copyright notice and this license. These can be 52 | included either as stand-alone text files, human-readable headers or 53 | in the appropriate machine-readable metadata fields within text or 54 | binary files as long as those fields can be easily viewed by the user. 55 | 56 | 3) No Modified Version of the Font Software may use the Reserved Font 57 | Name(s) unless explicit written permission is granted by the corresponding 58 | Copyright Holder. This restriction only applies to the primary font name as 59 | presented to the users. 60 | 61 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 62 | Software shall not be used to promote, endorse or advertise any 63 | Modified Version, except to acknowledge the contribution(s) of the 64 | Copyright Holder(s) and the Author(s) or with their explicit written 65 | permission. 66 | 67 | 5) The Font Software, modified or unmodified, in part or in whole, 68 | must be distributed entirely under this license, and must not be 69 | distributed under any other license. The requirement for fonts to 70 | remain under this license does not apply to any document created 71 | using the Font Software. 72 | 73 | TERMINATION 74 | This license becomes null and void if any of the above conditions are 75 | not met. 76 | 77 | DISCLAIMER 78 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 79 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 80 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 81 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 82 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 83 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 84 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 85 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 86 | OTHER DEALINGS IN THE FONT SOFTWARE. 87 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/wwwroot/css/open-iconic/ICON-LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Waybury 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/wwwroot/css/open-iconic/README.md: -------------------------------------------------------------------------------- 1 | [Open Iconic v1.1.1](http://useiconic.com/open) 2 | =========== 3 | 4 | ### Open Iconic is the open source sibling of [Iconic](http://useiconic.com). It is a hyper-legible collection of 223 icons with a tiny footprint—ready to use with Bootstrap and Foundation. [View the collection](http://useiconic.com/open#icons) 5 | 6 | 7 | 8 | ## What's in Open Iconic? 9 | 10 | * 223 icons designed to be legible down to 8 pixels 11 | * Super-light SVG files - 61.8 for the entire set 12 | * SVG sprite—the modern replacement for icon fonts 13 | * Webfont (EOT, OTF, SVG, TTF, WOFF), PNG and WebP formats 14 | * Webfont stylesheets (including versions for Bootstrap and Foundation) in CSS, LESS, SCSS and Stylus formats 15 | * PNG and WebP raster images in 8px, 16px, 24px, 32px, 48px and 64px. 16 | 17 | 18 | ## Getting Started 19 | 20 | #### For code samples and everything else you need to get started with Open Iconic, check out our [Icons](http://useiconic.com/open#icons) and [Reference](http://useiconic.com/open#reference) sections. 21 | 22 | ### General Usage 23 | 24 | #### Using Open Iconic's SVGs 25 | 26 | We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the `alt` attribute). 27 | 28 | ``` 29 | icon name 30 | ``` 31 | 32 | #### Using Open Iconic's SVG Sprite 33 | 34 | Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack. 35 | 36 | Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `` *tag and a unique class name for each different icon in the* `` *tag.* 37 | 38 | ``` 39 | 40 | 41 | 42 | ``` 43 | 44 | Sizing icons only needs basic CSS. All the icons are in a square format, so just set the `` tag with equal width and height dimensions. 45 | 46 | ``` 47 | .icon { 48 | width: 16px; 49 | height: 16px; 50 | } 51 | ``` 52 | 53 | Coloring icons is even easier. All you need to do is set the `fill` rule on the `` tag. 54 | 55 | ``` 56 | .icon-account-login { 57 | fill: #f00; 58 | } 59 | ``` 60 | 61 | To learn more about SVG Sprites, read [Chris Coyier's guide](http://css-tricks.com/svg-sprites-use-better-icon-fonts/). 62 | 63 | #### Using Open Iconic's Icon Font... 64 | 65 | 66 | ##### …with Bootstrap 67 | 68 | You can find our Bootstrap stylesheets in `font/css/open-iconic-bootstrap.{css, less, scss, styl}` 69 | 70 | 71 | ``` 72 | 73 | ``` 74 | 75 | 76 | ``` 77 | 78 | ``` 79 | 80 | ##### …with Foundation 81 | 82 | You can find our Foundation stylesheets in `font/css/open-iconic-foundation.{css, less, scss, styl}` 83 | 84 | ``` 85 | 86 | ``` 87 | 88 | 89 | ``` 90 | 91 | ``` 92 | 93 | ##### …on its own 94 | 95 | You can find our default stylesheets in `font/css/open-iconic.{css, less, scss, styl}` 96 | 97 | ``` 98 | 99 | ``` 100 | 101 | ``` 102 | 103 | ``` 104 | 105 | 106 | ## License 107 | 108 | ### Icons 109 | 110 | All code (including SVG markup) is under the [MIT License](http://opensource.org/licenses/MIT). 111 | 112 | ### Fonts 113 | 114 | All fonts are under the [SIL Licensed](http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web). 115 | -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:Icons;src:url(../fonts/open-iconic.eot);src:url(../fonts/open-iconic.eot?#iconic-sm) format('embedded-opentype'),url(../fonts/open-iconic.woff) format('woff'),url(../fonts/open-iconic.ttf) format('truetype'),url(../fonts/open-iconic.otf) format('opentype'),url(../fonts/open-iconic.svg#iconic-sm) format('svg');font-weight:400;font-style:normal}.oi{position:relative;top:1px;display:inline-block;speak:none;font-family:Icons;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.oi:empty:before{width:1em;text-align:center;box-sizing:content-box}.oi.oi-align-center:before{text-align:center}.oi.oi-align-left:before{text-align:left}.oi.oi-align-right:before{text-align:right}.oi.oi-flip-horizontal:before{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.oi.oi-flip-vertical:before{-webkit-transform:scale(1,-1);-ms-transform:scale(-1,1);transform:scale(1,-1)}.oi.oi-flip-horizontal-vertical:before{-webkit-transform:scale(-1,-1);-ms-transform:scale(-1,1);transform:scale(-1,-1)}.oi-account-login:before{content:'\e000'}.oi-account-logout:before{content:'\e001'}.oi-action-redo:before{content:'\e002'}.oi-action-undo:before{content:'\e003'}.oi-align-center:before{content:'\e004'}.oi-align-left:before{content:'\e005'}.oi-align-right:before{content:'\e006'}.oi-aperture:before{content:'\e007'}.oi-arrow-bottom:before{content:'\e008'}.oi-arrow-circle-bottom:before{content:'\e009'}.oi-arrow-circle-left:before{content:'\e00a'}.oi-arrow-circle-right:before{content:'\e00b'}.oi-arrow-circle-top:before{content:'\e00c'}.oi-arrow-left:before{content:'\e00d'}.oi-arrow-right:before{content:'\e00e'}.oi-arrow-thick-bottom:before{content:'\e00f'}.oi-arrow-thick-left:before{content:'\e010'}.oi-arrow-thick-right:before{content:'\e011'}.oi-arrow-thick-top:before{content:'\e012'}.oi-arrow-top:before{content:'\e013'}.oi-audio-spectrum:before{content:'\e014'}.oi-audio:before{content:'\e015'}.oi-badge:before{content:'\e016'}.oi-ban:before{content:'\e017'}.oi-bar-chart:before{content:'\e018'}.oi-basket:before{content:'\e019'}.oi-battery-empty:before{content:'\e01a'}.oi-battery-full:before{content:'\e01b'}.oi-beaker:before{content:'\e01c'}.oi-bell:before{content:'\e01d'}.oi-bluetooth:before{content:'\e01e'}.oi-bold:before{content:'\e01f'}.oi-bolt:before{content:'\e020'}.oi-book:before{content:'\e021'}.oi-bookmark:before{content:'\e022'}.oi-box:before{content:'\e023'}.oi-briefcase:before{content:'\e024'}.oi-british-pound:before{content:'\e025'}.oi-browser:before{content:'\e026'}.oi-brush:before{content:'\e027'}.oi-bug:before{content:'\e028'}.oi-bullhorn:before{content:'\e029'}.oi-calculator:before{content:'\e02a'}.oi-calendar:before{content:'\e02b'}.oi-camera-slr:before{content:'\e02c'}.oi-caret-bottom:before{content:'\e02d'}.oi-caret-left:before{content:'\e02e'}.oi-caret-right:before{content:'\e02f'}.oi-caret-top:before{content:'\e030'}.oi-cart:before{content:'\e031'}.oi-chat:before{content:'\e032'}.oi-check:before{content:'\e033'}.oi-chevron-bottom:before{content:'\e034'}.oi-chevron-left:before{content:'\e035'}.oi-chevron-right:before{content:'\e036'}.oi-chevron-top:before{content:'\e037'}.oi-circle-check:before{content:'\e038'}.oi-circle-x:before{content:'\e039'}.oi-clipboard:before{content:'\e03a'}.oi-clock:before{content:'\e03b'}.oi-cloud-download:before{content:'\e03c'}.oi-cloud-upload:before{content:'\e03d'}.oi-cloud:before{content:'\e03e'}.oi-cloudy:before{content:'\e03f'}.oi-code:before{content:'\e040'}.oi-cog:before{content:'\e041'}.oi-collapse-down:before{content:'\e042'}.oi-collapse-left:before{content:'\e043'}.oi-collapse-right:before{content:'\e044'}.oi-collapse-up:before{content:'\e045'}.oi-command:before{content:'\e046'}.oi-comment-square:before{content:'\e047'}.oi-compass:before{content:'\e048'}.oi-contrast:before{content:'\e049'}.oi-copywriting:before{content:'\e04a'}.oi-credit-card:before{content:'\e04b'}.oi-crop:before{content:'\e04c'}.oi-dashboard:before{content:'\e04d'}.oi-data-transfer-download:before{content:'\e04e'}.oi-data-transfer-upload:before{content:'\e04f'}.oi-delete:before{content:'\e050'}.oi-dial:before{content:'\e051'}.oi-document:before{content:'\e052'}.oi-dollar:before{content:'\e053'}.oi-double-quote-sans-left:before{content:'\e054'}.oi-double-quote-sans-right:before{content:'\e055'}.oi-double-quote-serif-left:before{content:'\e056'}.oi-double-quote-serif-right:before{content:'\e057'}.oi-droplet:before{content:'\e058'}.oi-eject:before{content:'\e059'}.oi-elevator:before{content:'\e05a'}.oi-ellipses:before{content:'\e05b'}.oi-envelope-closed:before{content:'\e05c'}.oi-envelope-open:before{content:'\e05d'}.oi-euro:before{content:'\e05e'}.oi-excerpt:before{content:'\e05f'}.oi-expand-down:before{content:'\e060'}.oi-expand-left:before{content:'\e061'}.oi-expand-right:before{content:'\e062'}.oi-expand-up:before{content:'\e063'}.oi-external-link:before{content:'\e064'}.oi-eye:before{content:'\e065'}.oi-eyedropper:before{content:'\e066'}.oi-file:before{content:'\e067'}.oi-fire:before{content:'\e068'}.oi-flag:before{content:'\e069'}.oi-flash:before{content:'\e06a'}.oi-folder:before{content:'\e06b'}.oi-fork:before{content:'\e06c'}.oi-fullscreen-enter:before{content:'\e06d'}.oi-fullscreen-exit:before{content:'\e06e'}.oi-globe:before{content:'\e06f'}.oi-graph:before{content:'\e070'}.oi-grid-four-up:before{content:'\e071'}.oi-grid-three-up:before{content:'\e072'}.oi-grid-two-up:before{content:'\e073'}.oi-hard-drive:before{content:'\e074'}.oi-header:before{content:'\e075'}.oi-headphones:before{content:'\e076'}.oi-heart:before{content:'\e077'}.oi-home:before{content:'\e078'}.oi-image:before{content:'\e079'}.oi-inbox:before{content:'\e07a'}.oi-infinity:before{content:'\e07b'}.oi-info:before{content:'\e07c'}.oi-italic:before{content:'\e07d'}.oi-justify-center:before{content:'\e07e'}.oi-justify-left:before{content:'\e07f'}.oi-justify-right:before{content:'\e080'}.oi-key:before{content:'\e081'}.oi-laptop:before{content:'\e082'}.oi-layers:before{content:'\e083'}.oi-lightbulb:before{content:'\e084'}.oi-link-broken:before{content:'\e085'}.oi-link-intact:before{content:'\e086'}.oi-list-rich:before{content:'\e087'}.oi-list:before{content:'\e088'}.oi-location:before{content:'\e089'}.oi-lock-locked:before{content:'\e08a'}.oi-lock-unlocked:before{content:'\e08b'}.oi-loop-circular:before{content:'\e08c'}.oi-loop-square:before{content:'\e08d'}.oi-loop:before{content:'\e08e'}.oi-magnifying-glass:before{content:'\e08f'}.oi-map-marker:before{content:'\e090'}.oi-map:before{content:'\e091'}.oi-media-pause:before{content:'\e092'}.oi-media-play:before{content:'\e093'}.oi-media-record:before{content:'\e094'}.oi-media-skip-backward:before{content:'\e095'}.oi-media-skip-forward:before{content:'\e096'}.oi-media-step-backward:before{content:'\e097'}.oi-media-step-forward:before{content:'\e098'}.oi-media-stop:before{content:'\e099'}.oi-medical-cross:before{content:'\e09a'}.oi-menu:before{content:'\e09b'}.oi-microphone:before{content:'\e09c'}.oi-minus:before{content:'\e09d'}.oi-monitor:before{content:'\e09e'}.oi-moon:before{content:'\e09f'}.oi-move:before{content:'\e0a0'}.oi-musical-note:before{content:'\e0a1'}.oi-paperclip:before{content:'\e0a2'}.oi-pencil:before{content:'\e0a3'}.oi-people:before{content:'\e0a4'}.oi-person:before{content:'\e0a5'}.oi-phone:before{content:'\e0a6'}.oi-pie-chart:before{content:'\e0a7'}.oi-pin:before{content:'\e0a8'}.oi-play-circle:before{content:'\e0a9'}.oi-plus:before{content:'\e0aa'}.oi-power-standby:before{content:'\e0ab'}.oi-print:before{content:'\e0ac'}.oi-project:before{content:'\e0ad'}.oi-pulse:before{content:'\e0ae'}.oi-puzzle-piece:before{content:'\e0af'}.oi-question-mark:before{content:'\e0b0'}.oi-rain:before{content:'\e0b1'}.oi-random:before{content:'\e0b2'}.oi-reload:before{content:'\e0b3'}.oi-resize-both:before{content:'\e0b4'}.oi-resize-height:before{content:'\e0b5'}.oi-resize-width:before{content:'\e0b6'}.oi-rss-alt:before{content:'\e0b7'}.oi-rss:before{content:'\e0b8'}.oi-script:before{content:'\e0b9'}.oi-share-boxed:before{content:'\e0ba'}.oi-share:before{content:'\e0bb'}.oi-shield:before{content:'\e0bc'}.oi-signal:before{content:'\e0bd'}.oi-signpost:before{content:'\e0be'}.oi-sort-ascending:before{content:'\e0bf'}.oi-sort-descending:before{content:'\e0c0'}.oi-spreadsheet:before{content:'\e0c1'}.oi-star:before{content:'\e0c2'}.oi-sun:before{content:'\e0c3'}.oi-tablet:before{content:'\e0c4'}.oi-tag:before{content:'\e0c5'}.oi-tags:before{content:'\e0c6'}.oi-target:before{content:'\e0c7'}.oi-task:before{content:'\e0c8'}.oi-terminal:before{content:'\e0c9'}.oi-text:before{content:'\e0ca'}.oi-thumb-down:before{content:'\e0cb'}.oi-thumb-up:before{content:'\e0cc'}.oi-timer:before{content:'\e0cd'}.oi-transfer:before{content:'\e0ce'}.oi-trash:before{content:'\e0cf'}.oi-underline:before{content:'\e0d0'}.oi-vertical-align-bottom:before{content:'\e0d1'}.oi-vertical-align-center:before{content:'\e0d2'}.oi-vertical-align-top:before{content:'\e0d3'}.oi-video:before{content:'\e0d4'}.oi-volume-high:before{content:'\e0d5'}.oi-volume-low:before{content:'\e0d6'}.oi-volume-off:before{content:'\e0d7'}.oi-warning:before{content:'\e0d8'}.oi-wifi:before{content:'\e0d9'}.oi-wrench:before{content:'\e0da'}.oi-x:before{content:'\e0db'}.oi-yen:before{content:'\e0dc'}.oi-zoom-in:before{content:'\e0dd'}.oi-zoom-out:before{content:'\e0de'} -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/wwwroot/css/open-iconic/font/fonts/open-iconic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikoskinen/Blazor.Animate/b21038311e3142f347c2d88d2ada0d44fca222e4/samples/BlazorAnimate.Sample/wwwroot/css/open-iconic/font/fonts/open-iconic.eot -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/wwwroot/css/open-iconic/font/fonts/open-iconic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikoskinen/Blazor.Animate/b21038311e3142f347c2d88d2ada0d44fca222e4/samples/BlazorAnimate.Sample/wwwroot/css/open-iconic/font/fonts/open-iconic.otf -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikoskinen/Blazor.Animate/b21038311e3142f347c2d88d2ada0d44fca222e4/samples/BlazorAnimate.Sample/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/wwwroot/css/open-iconic/font/fonts/open-iconic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikoskinen/Blazor.Animate/b21038311e3142f347c2d88d2ada0d44fca222e4/samples/BlazorAnimate.Sample/wwwroot/css/open-iconic/font/fonts/open-iconic.woff -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/wwwroot/css/site.css: -------------------------------------------------------------------------------- 1 | @import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); 2 | 3 | html, body { 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | } 6 | 7 | a, .btn-link { 8 | color: #0366d6; 9 | } 10 | 11 | .btn-primary { 12 | color: #fff; 13 | background-color: #1b6ec2; 14 | border-color: #1861ac; 15 | } 16 | 17 | app { 18 | position: relative; 19 | display: flex; 20 | flex-direction: column; 21 | } 22 | 23 | .top-row { 24 | height: 3.5rem; 25 | display: flex; 26 | align-items: center; 27 | } 28 | 29 | .main { 30 | flex: 1; 31 | } 32 | 33 | .main .top-row { 34 | background-color: #f7f7f7; 35 | border-bottom: 1px solid #d6d5d5; 36 | justify-content: flex-end; 37 | } 38 | 39 | .main .top-row > a { 40 | margin-left: 1.5rem; 41 | } 42 | 43 | .sidebar { 44 | background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); 45 | } 46 | 47 | .sidebar .top-row { 48 | background-color: rgba(0,0,0,0.4); 49 | } 50 | 51 | .sidebar .navbar-brand { 52 | font-size: 1.1rem; 53 | } 54 | 55 | .sidebar .oi { 56 | width: 2rem; 57 | font-size: 1.1rem; 58 | vertical-align: text-top; 59 | top: -2px; 60 | } 61 | 62 | .nav-item { 63 | font-size: 0.9rem; 64 | padding-bottom: 0.5rem; 65 | } 66 | 67 | .nav-item:first-of-type { 68 | padding-top: 1rem; 69 | } 70 | 71 | .nav-item:last-of-type { 72 | padding-bottom: 1rem; 73 | } 74 | 75 | .nav-item a { 76 | color: #d7d7d7; 77 | border-radius: 4px; 78 | height: 3rem; 79 | display: flex; 80 | align-items: center; 81 | line-height: 3rem; 82 | } 83 | 84 | .nav-item a.active { 85 | background-color: rgba(255,255,255,0.25); 86 | color: white; 87 | } 88 | 89 | .nav-item a:hover { 90 | background-color: rgba(255,255,255,0.1); 91 | color: white; 92 | } 93 | 94 | .content { 95 | padding-top: 1.1rem; 96 | } 97 | 98 | .navbar-toggler { 99 | background-color: rgba(255, 255, 255, 0.1); 100 | } 101 | 102 | .valid.modified:not([type=checkbox]) { 103 | outline: 1px solid #26b050; 104 | } 105 | 106 | .invalid { 107 | outline: 1px solid red; 108 | } 109 | 110 | .validation-message { 111 | color: red; 112 | } 113 | 114 | @media (max-width: 767.98px) { 115 | .main .top-row { 116 | display: none; 117 | } 118 | } 119 | 120 | @media (min-width: 768px) { 121 | app { 122 | flex-direction: row; 123 | } 124 | 125 | .sidebar { 126 | width: 250px; 127 | height: 100vh; 128 | position: sticky; 129 | top: 0; 130 | } 131 | 132 | .main .top-row { 133 | position: sticky; 134 | top: 0; 135 | } 136 | 137 | .main > div { 138 | padding-left: 2rem !important; 139 | padding-right: 1.5rem !important; 140 | } 141 | 142 | .navbar-toggler { 143 | display: none; 144 | } 145 | 146 | .sidebar .collapse { 147 | /* Never collapse the sidebar for wide screens */ 148 | display: block; 149 | } 150 | } 151 | 152 | body { 153 | overflow-x: hidden; 154 | } 155 | 156 | * { 157 | box-sizing: border-box; 158 | } 159 | 160 | .item { 161 | width: 200px; 162 | margin: 50px auto; 163 | max-height: 250px; 164 | padding: 35px 20px; 165 | background: #ccc; 166 | text-align: center; 167 | color: #FFF; 168 | font-size: 3em; 169 | } 170 | 171 | .item span { 172 | display: block; 173 | font-size: 1rem; 174 | } 175 | 176 | .left-pane { 177 | position: fixed; 178 | top: 0; 179 | bottom: 0; 180 | margin: auto; 181 | left: 30%; 182 | background: red; 183 | } 184 | 185 | .right-pane { 186 | position: fixed; 187 | top: 0; 188 | bottom: 0; 189 | margin: auto; 190 | right: 20%; 191 | background: green; 192 | } -------------------------------------------------------------------------------- /samples/BlazorAnimate.Sample/wwwroot/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikoskinen/Blazor.Animate/b21038311e3142f347c2d88d2ada0d44fca222e4/samples/BlazorAnimate.Sample/wwwroot/favicon.ico -------------------------------------------------------------------------------- /src/BlazorAnimate.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio Version 16 4 | VisualStudioVersion = 16.0.29424.173 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorAnimate", "BlazorAnimate\BlazorAnimate.csproj", "{641CF984-9682-415D-A788-66D49E790E90}" 7 | EndProject 8 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorAnimate.Sample", "..\samples\BlazorAnimate.Sample\BlazorAnimate.Sample.csproj", "{7EE72187-9A1F-47A0-9599-1FEA3342E3FB}" 9 | EndProject 10 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorAnimate.Sample.WebAssembly", "..\samples\BlazorAnimate.Sample.WebAssembly\BlazorAnimate.Sample.WebAssembly.csproj", "{A86A6546-D842-495A-8487-8F298E836546}" 11 | EndProject 12 | Global 13 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 14 | Debug|Any CPU = Debug|Any CPU 15 | Release|Any CPU = Release|Any CPU 16 | EndGlobalSection 17 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 18 | {641CF984-9682-415D-A788-66D49E790E90}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 19 | {641CF984-9682-415D-A788-66D49E790E90}.Debug|Any CPU.Build.0 = Debug|Any CPU 20 | {641CF984-9682-415D-A788-66D49E790E90}.Release|Any CPU.ActiveCfg = Release|Any CPU 21 | {641CF984-9682-415D-A788-66D49E790E90}.Release|Any CPU.Build.0 = Release|Any CPU 22 | {7EE72187-9A1F-47A0-9599-1FEA3342E3FB}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 23 | {7EE72187-9A1F-47A0-9599-1FEA3342E3FB}.Debug|Any CPU.Build.0 = Debug|Any CPU 24 | {7EE72187-9A1F-47A0-9599-1FEA3342E3FB}.Release|Any CPU.ActiveCfg = Release|Any CPU 25 | {7EE72187-9A1F-47A0-9599-1FEA3342E3FB}.Release|Any CPU.Build.0 = Release|Any CPU 26 | {A86A6546-D842-495A-8487-8F298E836546}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 27 | {A86A6546-D842-495A-8487-8F298E836546}.Debug|Any CPU.Build.0 = Debug|Any CPU 28 | {A86A6546-D842-495A-8487-8F298E836546}.Release|Any CPU.ActiveCfg = Release|Any CPU 29 | {A86A6546-D842-495A-8487-8F298E836546}.Release|Any CPU.Build.0 = Release|Any CPU 30 | EndGlobalSection 31 | GlobalSection(SolutionProperties) = preSolution 32 | HideSolutionNode = FALSE 33 | EndGlobalSection 34 | GlobalSection(ExtensibilityGlobals) = postSolution 35 | SolutionGuid = {8CDC4624-A186-4928-809D-116673F8C8DF} 36 | EndGlobalSection 37 | EndGlobal 38 | -------------------------------------------------------------------------------- /src/BlazorAnimate/Anchor.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public static class Anchor 4 | { 5 | public static string TopBottom => "top-bottom"; 6 | public static string TopCenter => "top-center"; 7 | public static string TopTop => "top-top"; 8 | public static string CenterBottom => "center-bottom"; 9 | public static string CenterCenter => "center-center"; 10 | public static string CenterTop => "center-top"; 11 | public static string BottomBottom => "bottom-bottom"; 12 | public static string BottomCenter => "bottom-center"; 13 | public static string BottomTop => "bottom-top"; 14 | } 15 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animate.razor: -------------------------------------------------------------------------------- 1 | @using System.Globalization 2 | @using Microsoft.Extensions.Options 3 | 4 | @if (_manuallyExecuted || IsManual == false) 5 | { 6 |
8 | @ChildContent 9 |
10 | } 11 | 12 | @code 13 | { 14 | private string _animationName = ""; 15 | private string _easingName = ""; 16 | private string _duration = ""; 17 | private string _delay = ""; 18 | private string _mirror; 19 | private string _once; 20 | private bool _manuallyExecuted = false; 21 | 22 | [Parameter] public RenderFragment ChildContent { get; set; } 23 | [Parameter] public IAnimation Animation { get; set; } 24 | [Parameter] public IEasing Easing { get; set; } 25 | [Parameter] public TimeSpan? Duration { get; set; } 26 | [Parameter] public TimeSpan? Delay { get; set; } 27 | [Parameter] public int? DurationMs { get; set; } 28 | [Parameter] public int? DelayMs { get; set; } 29 | [Parameter] public bool? Mirror { get; set; } 30 | [Parameter] public bool? Once { get; set; } 31 | [Parameter] public int Offset { get; set; } 32 | [Parameter] public string Anchor { get; set; } 33 | [Parameter] public string AnchorPlacement { get; set; } 34 | [Parameter] public string OptionsName { get; set; } = Microsoft.Extensions.Options.Options.DefaultName; 35 | [Parameter] public AnimateOptions Options { get; set; } 36 | [Parameter] public bool IsManual { get; set; } 37 | 38 | [Parameter(CaptureUnmatchedValues = true)] 39 | public Dictionary InputAttributes { get; set; } 40 | 41 | [Inject] private IOptionsSnapshot _optionsAccessor { get; set; } 42 | 43 | public void Run() 44 | { 45 | _manuallyExecuted = true; 46 | } 47 | 48 | protected override void OnParametersSet() 49 | { 50 | SetDefaults(); 51 | 52 | if (!string.IsNullOrWhiteSpace(Animation?.Name)) 53 | { 54 | _animationName = Animation.Name; 55 | } 56 | 57 | if (!string.IsNullOrWhiteSpace(Easing?.Name)) 58 | { 59 | _easingName = Easing.Name; 60 | } 61 | 62 | SetDuration(); 63 | SetDelay(); 64 | 65 | if (Mirror != null) 66 | { 67 | _mirror = Mirror.GetValueOrDefault().ToString().ToLowerInvariant(); 68 | } 69 | 70 | if (Once != null) 71 | { 72 | _once = Once.GetValueOrDefault().ToString().ToLowerInvariant(); 73 | } 74 | } 75 | 76 | private void SetDefaults() 77 | { 78 | var options = GetOptions(); 79 | if (options == null) 80 | { 81 | return; 82 | } 83 | 84 | _animationName = options.Animation?.Name ?? ""; 85 | _easingName = options.Easing?.Name ?? ""; 86 | _duration = options.Duration.TotalMilliseconds.ToString(CultureInfo.InvariantCulture); 87 | _delay = options.Delay.TotalMilliseconds.ToString(CultureInfo.InvariantCulture); 88 | _mirror = options.Mirror.ToString().ToLowerInvariant(); 89 | _once = options.Once.ToString().ToLowerInvariant(); 90 | } 91 | 92 | private AnimateOptions GetOptions() 93 | { 94 | var result = Options; 95 | if (result != null) 96 | { 97 | return result; 98 | } 99 | 100 | result = _optionsAccessor.Get(OptionsName); 101 | 102 | return result; 103 | } 104 | 105 | private void SetDuration() 106 | { 107 | if (Duration != null) 108 | { 109 | _duration = Duration.GetValueOrDefault().TotalMilliseconds.ToString(CultureInfo.InvariantCulture); 110 | return; 111 | } 112 | 113 | if (DurationMs != null) 114 | { 115 | _duration = DurationMs.GetValueOrDefault().ToString(); 116 | } 117 | } 118 | 119 | private void SetDelay() 120 | { 121 | if (Delay != null) 122 | { 123 | _delay = Delay.GetValueOrDefault().TotalMilliseconds.ToString(CultureInfo.InvariantCulture); 124 | return; 125 | } 126 | 127 | if (DelayMs != null) 128 | { 129 | _delay = DelayMs.GetValueOrDefault().ToString(); 130 | } 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /src/BlazorAnimate/AnimateOptions.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | 3 | namespace BlazorAnimate 4 | { 5 | public class AnimateOptions 6 | { 7 | public IAnimation Animation { get; set; } 8 | public IEasing Easing { get; set; } 9 | public TimeSpan Duration { get; set; } 10 | public TimeSpan Delay { get; set; } 11 | public bool Mirror { get; set; } 12 | public bool Once { get; set; } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public static class Animations 4 | { 5 | public static IAnimation Fade => new FadeAnimation(); 6 | public static IAnimation FadeIn => new FadeAnimation(); 7 | public static IAnimation FadeUp => new FadeUpAnimation(); 8 | public static IAnimation FadeDown => new FadeDownAnimation(); 9 | public static IAnimation FadeLeft => new FadeLeftAnimation(); 10 | public static IAnimation FadeRight => new FadeRightAnimation(); 11 | public static IAnimation FadeUpRight => new FadeUpRightAnimation(); 12 | public static IAnimation FadeUpLeft => new FadeUpLeftAnimation(); 13 | public static IAnimation FadeDownRight => new FadeDownRightAnimation(); 14 | public static IAnimation FadeDownLeft => new FadeDownLeftAnimation(); 15 | public static IAnimation FlipUp => new FlipUpAnimation(); 16 | public static IAnimation FlipDown => new FlipDownAnimation(); 17 | public static IAnimation FlipLeft => new FlipLeftAnimation(); 18 | public static IAnimation FlipRight => new FlipRightAnimation(); 19 | public static IAnimation SlideUp => new SlideUpAnimation(); 20 | public static IAnimation SlideDown => new SlideDownAnimation(); 21 | public static IAnimation SlideLeft => new SlideLeftAnimation(); 22 | public static IAnimation SlideRight => new SlideRightAnimation(); 23 | public static IAnimation ZoomIn => new ZoomInAnimation(); 24 | public static IAnimation ZoomInUp => new ZoomInUpAnimation(); 25 | public static IAnimation ZoomInDown => new ZoomInDownAnimation(); 26 | public static IAnimation ZoomInLeft => new ZoomInLeftAnimation(); 27 | public static IAnimation ZoomInRight => new ZoomInRightAnimation(); 28 | public static IAnimation ZoomOut => new ZoomOutAnimation(); 29 | public static IAnimation ZoomOutUp => new ZoomOutUpAnimation(); 30 | public static IAnimation ZoomOutDown => new ZoomOutDownAnimation(); 31 | public static IAnimation ZoomOutLeft => new ZoomOutLeftAnimation(); 32 | public static IAnimation ZoomOutRight => new ZoomOutRightAnimation(); 33 | } 34 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/FadeAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class FadeAnimation : IAnimation 4 | { 5 | public string Name => "fade"; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/FadeDownAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class FadeDownAnimation : IAnimation 4 | { 5 | public string Name => "fade-down"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/FadeDownLeftAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class FadeDownLeftAnimation : IAnimation 4 | { 5 | public string Name => "fade-down-left"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/FadeDownRightAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class FadeDownRightAnimation : IAnimation 4 | { 5 | public string Name => "fade-down-right"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/FadeInAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class FadeInAnimation : IAnimation 4 | { 5 | public string Name => "fade-in"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/FadeLeftAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class FadeLeftAnimation : IAnimation 4 | { 5 | public string Name => "fade-left"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/FadeRightAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class FadeRightAnimation : IAnimation 4 | { 5 | public string Name => "fade-right"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/FadeUpAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class FadeUpAnimation : IAnimation 4 | { 5 | public string Name => "fade-up"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/FadeUpLeftAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class FadeUpLeftAnimation : IAnimation 4 | { 5 | public string Name => "fade-up-left"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/FadeUpRightAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class FadeUpRightAnimation : IAnimation 4 | { 5 | public string Name => "fade-up-right"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/FlipDownAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class FlipDownAnimation : IAnimation 4 | { 5 | public string Name => "flip-down"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/FlipLeftAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class FlipLeftAnimation : IAnimation 4 | { 5 | public string Name => "flip-left"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/FlipRightAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class FlipRightAnimation : IAnimation 4 | { 5 | public string Name => "flip-right"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/FlipUpAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class FlipUpAnimation : IAnimation 4 | { 5 | public string Name => "flip-up"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/SlideDownAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class SlideDownAnimation : IAnimation 4 | { 5 | public string Name => "slide-down"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/SlideLeftAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class SlideLeftAnimation : IAnimation 4 | { 5 | public string Name => "slide-left"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/SlideRightAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class SlideRightAnimation : IAnimation 4 | { 5 | public string Name => "slide-right"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/SlideUpAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class SlideUpAnimation : IAnimation 4 | { 5 | public string Name => "slide-up"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/ZoomInAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class ZoomInAnimation : IAnimation 4 | { 5 | public string Name => "zoom-in"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/ZoomInDownAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class ZoomInDownAnimation : IAnimation 4 | { 5 | public string Name => "zoom-in-down"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/ZoomInLeftAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class ZoomInLeftAnimation : IAnimation 4 | { 5 | public string Name => "zoom-in-left"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/ZoomInRightAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class ZoomInRightAnimation : IAnimation 4 | { 5 | public string Name => "zoom-in-right"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/ZoomInUpAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class ZoomInUpAnimation : IAnimation 4 | { 5 | public string Name => "zoom-in-up"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/ZoomOutAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class ZoomOutAnimation : IAnimation 4 | { 5 | public string Name => "zoom-out"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/ZoomOutDownAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class ZoomOutDownAnimation : IAnimation 4 | { 5 | public string Name => "zoom-out-down"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/ZoomOutLeftAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class ZoomOutLeftAnimation : IAnimation 4 | { 5 | public string Name => "zoom-out-left"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/ZoomOutRightAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class ZoomOutRightAnimation : IAnimation 4 | { 5 | public string Name => "zoom-out-right"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Animations/ZoomOutUpAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class ZoomOutUpAnimation : IAnimation 4 | { 5 | public string Name => "zoom-out-up"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/BlazorAnimate.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netstandard2.0 5 | 3.0 6 | true 7 | true 8 | Mikael Koskinen 9 | Easily Animate Blazor Components using Blazor Animate. Powered by AOS. 10 | Easily Animate Blazor Components using Blazor Animate. Powered by AOS. 11 | https://github.com/mikoskinen/Blazor.Animate 12 | ©2020 Mikael Koskinen 13 | BlazorAnimate 14 | BlazorAnimate 15 | MIT 16 | https://github.com/mikoskinen/Blazor.Animate 17 | blazor;animation;animate 18 | Blazor Animate 19 | 3.0 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | $(PublishDir) 32 | $(MSBuildThisFileDirectory)$(PublishDir) 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/BlazorAnimate/BlazorAnimate.csproj.DotSettings: -------------------------------------------------------------------------------- 1 |  2 | True 3 | True -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public static class Easings 4 | { 5 | public static IEasing Linear => new LinearEasing(); 6 | public static IEasing Ease => new EaseEasing(); 7 | public static IEasing EaseIn => new EaseInEasing(); 8 | public static IEasing EaseOut => new EaseOutEasing(); 9 | public static IEasing EaseInOut => new EaseInOutEasing(); 10 | public static IEasing EaseInBack => new EaseInBackEasing(); 11 | public static IEasing EaseOutBack => new EaseOutBackEasing(); 12 | public static IEasing EaseInOutBack => new EaseInOutBackEasing(); 13 | public static IEasing EaseInSine => new EaseInSineEasing(); 14 | public static IEasing EaseOutSine => new EaseOutSineEasing(); 15 | public static IEasing EaseInOutSine => new EaseInOutSineEasing(); 16 | public static IEasing EaseInQuad => new EaseInQuadEasing(); 17 | public static IEasing EaseOutQuad => new EaseOutQuadEasing(); 18 | public static IEasing EaseInOutQuad => new EaseInOutQuadEasing(); 19 | public static IEasing EaseInCubic => new EaseInCubicEasing(); 20 | public static IEasing EaseOutCubic => new EaseOutCubicEasing(); 21 | public static IEasing EaseInOutCubic => new EaseInOutCubicEasing(); 22 | public static IEasing EaseInQuart => new EaseInQuartEasing(); 23 | public static IEasing EaseOutQuart => new EaseOutQuartEasing(); 24 | public static IEasing EaseInOutQuart => new EaseInOutQuartEasing(); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseEasing : IEasing 4 | { 5 | public string Name => "Ease"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseInBackEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseInBackEasing : IEasing 4 | { 5 | public string Name => "ease-in-back"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseInCubicEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseInCubicEasing : IEasing 4 | { 5 | public string Name => "ease-in-cubic"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseInEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseInEasing : IEasing 4 | { 5 | public string Name => "ease-in"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseInOutBackEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseInOutBackEasing : IEasing 4 | { 5 | public string Name => "ease-in-out-back"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseInOutCubicEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseInOutCubicEasing : IEasing 4 | { 5 | public string Name => "ease-in-out-cubic"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseInOutEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseInOutEasing : IEasing 4 | { 5 | public string Name => "ease-in-out"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseInOutQuadEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseInOutQuadEasing : IEasing 4 | { 5 | public string Name => "ease-in-out-quad"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseInOutQuartEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseInOutQuartEasing : IEasing 4 | { 5 | public string Name => "ease-in-out-quart"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseInOutSineEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseInOutSineEasing : IEasing 4 | { 5 | public string Name => "ease-in-out-sine"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseInQuadEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseInQuadEasing : IEasing 4 | { 5 | public string Name => "ease-in-quad"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseInQuartEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseInQuartEasing : IEasing 4 | { 5 | public string Name => "ease-in-quart"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseInSineEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseInSineEasing : IEasing 4 | { 5 | public string Name => "ease-in-sine"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseOutBackEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseOutBackEasing : IEasing 4 | { 5 | public string Name => "ease-out-back"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseOutCubicEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseOutCubicEasing : IEasing 4 | { 5 | public string Name => "ease-out-cubic"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseOutEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseOutEasing : IEasing 4 | { 5 | public string Name => "ease-out"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseOutQuadEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseOutQuadEasing : IEasing 4 | { 5 | public string Name => "ease-out-quad"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseOutQuartEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseOutQuartEasing : IEasing 4 | { 5 | public string Name => "ease-out-quart"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/EaseOutSineEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class EaseOutSineEasing : IEasing 4 | { 5 | public string Name => "ease-out-sine"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/Easings/LinearEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public class LinearEasing : IEasing 4 | { 5 | public string Name => "linear"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/IAnimation.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public interface IAnimation 4 | { 5 | string Name { get; } 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/IEasing.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorAnimate 2 | { 3 | public interface IEasing 4 | { 5 | string Name { get; } 6 | } 7 | } -------------------------------------------------------------------------------- /src/BlazorAnimate/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components.Web 2 | -------------------------------------------------------------------------------- /src/BlazorAnimate/wwwroot/aos.css: -------------------------------------------------------------------------------- 1 | [data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)} -------------------------------------------------------------------------------- /src/BlazorAnimate/wwwroot/blazorAnimateInterop.js: -------------------------------------------------------------------------------- 1 | !function (e, t) { "object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define([], t) : "object" == typeof exports ? exports.AOS = t() : e.AOS = t() }(this, function () { return function (e) { function t(o) { if (n[o]) return n[o].exports; var i = n[o] = { exports: {}, id: o, loaded: !1 }; return e[o].call(i.exports, i, i.exports, t), i.loaded = !0, i.exports } var n = {}; return t.m = e, t.c = n, t.p = "dist/", t(0) }([function (e, t, n) { "use strict"; function o(e) { return e && e.__esModule ? e : { default: e } } var i = Object.assign || function (e) { for (var t = 1; t < arguments.length; t++) { var n = arguments[t]; for (var o in n) Object.prototype.hasOwnProperty.call(n, o) && (e[o] = n[o]) } return e }, r = n(1), a = (o(r), n(6)), u = o(a), c = n(7), f = o(c), s = n(8), d = o(s), l = n(9), p = o(l), m = n(10), b = o(m), v = n(11), y = o(v), g = n(14), h = o(g), w = [], k = !1, x = document.all && !window.atob, j = { offset: 120, delay: 0, easing: "ease", duration: 400, disable: !1, once: !1, startEvent: "DOMContentLoaded", throttleDelay: 99, debounceDelay: 50, disableMutationObserver: !1 }, O = function () { var e = arguments.length > 0 && void 0 !== arguments[0] && arguments[0]; if (e && (k = !0), k) return w = (0, y.default)(w, j), (0, b.default)(w, j.once), w }, _ = function () { w = (0, h.default)(), O() }, S = function () { w.forEach(function (e, t) { e.node.removeAttribute("data-aos"), e.node.removeAttribute("data-aos-easing"), e.node.removeAttribute("data-aos-duration"), e.node.removeAttribute("data-aos-delay") }) }, z = function (e) { return e === !0 || "mobile" === e && p.default.mobile() || "phone" === e && p.default.phone() || "tablet" === e && p.default.tablet() || "function" == typeof e && e() === !0 }, A = function (e) { return j = i(j, e), w = (0, h.default)(), z(j.disable) || x ? S() : (document.querySelector("body").setAttribute("data-aos-easing", j.easing), document.querySelector("body").setAttribute("data-aos-duration", j.duration), document.querySelector("body").setAttribute("data-aos-delay", j.delay), "DOMContentLoaded" === j.startEvent && ["complete", "interactive"].indexOf(document.readyState) > -1 ? O(!0) : "load" === j.startEvent ? window.addEventListener(j.startEvent, function () { O(!0) }) : document.addEventListener(j.startEvent, function () { O(!0) }), window.addEventListener("resize", (0, f.default)(O, j.debounceDelay, !0)), window.addEventListener("orientationchange", (0, f.default)(O, j.debounceDelay, !0)), window.addEventListener("scroll", (0, u.default)(function () { (0, b.default)(w, j.once) }, j.throttleDelay)), j.disableMutationObserver || (0, d.default)("[data-aos]", _), w) }; e.exports = { init: A, refresh: O, refreshHard: _ } }, function (e, t) { }, , , , , function (e, t) { (function (t) { "use strict"; function n(e, t, n) { function o(t) { var n = b, o = v; return b = v = void 0, k = t, g = e.apply(o, n) } function r(e) { return k = e, h = setTimeout(s, t), _ ? o(e) : g } function a(e) { var n = e - w, o = e - k, i = t - n; return S ? j(i, y - o) : i } function c(e) { var n = e - w, o = e - k; return void 0 === w || n >= t || n < 0 || S && o >= y } function s() { var e = O(); return c(e) ? d(e) : void (h = setTimeout(s, a(e))) } function d(e) { return h = void 0, z && b ? o(e) : (b = v = void 0, g) } function l() { void 0 !== h && clearTimeout(h), k = 0, b = w = v = h = void 0 } function p() { return void 0 === h ? g : d(O()) } function m() { var e = O(), n = c(e); if (b = arguments, v = this, w = e, n) { if (void 0 === h) return r(w); if (S) return h = setTimeout(s, t), o(w) } return void 0 === h && (h = setTimeout(s, t)), g } var b, v, y, g, h, w, k = 0, _ = !1, S = !1, z = !0; if ("function" != typeof e) throw new TypeError(f); return t = u(t) || 0, i(n) && (_ = !!n.leading, S = "maxWait" in n, y = S ? x(u(n.maxWait) || 0, t) : y, z = "trailing" in n ? !!n.trailing : z), m.cancel = l, m.flush = p, m } function o(e, t, o) { var r = !0, a = !0; if ("function" != typeof e) throw new TypeError(f); return i(o) && (r = "leading" in o ? !!o.leading : r, a = "trailing" in o ? !!o.trailing : a), n(e, t, { leading: r, maxWait: t, trailing: a }) } function i(e) { var t = "undefined" == typeof e ? "undefined" : c(e); return !!e && ("object" == t || "function" == t) } function r(e) { return !!e && "object" == ("undefined" == typeof e ? "undefined" : c(e)) } function a(e) { return "symbol" == ("undefined" == typeof e ? "undefined" : c(e)) || r(e) && k.call(e) == d } function u(e) { if ("number" == typeof e) return e; if (a(e)) return s; if (i(e)) { var t = "function" == typeof e.valueOf ? e.valueOf() : e; e = i(t) ? t + "" : t } if ("string" != typeof e) return 0 === e ? e : +e; e = e.replace(l, ""); var n = m.test(e); return n || b.test(e) ? v(e.slice(2), n ? 2 : 8) : p.test(e) ? s : +e } var c = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) { return typeof e } : function (e) { return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e }, f = "Expected a function", s = NaN, d = "[object Symbol]", l = /^\s+|\s+$/g, p = /^[-+]0x[0-9a-f]+$/i, m = /^0b[01]+$/i, b = /^0o[0-7]+$/i, v = parseInt, y = "object" == ("undefined" == typeof t ? "undefined" : c(t)) && t && t.Object === Object && t, g = "object" == ("undefined" == typeof self ? "undefined" : c(self)) && self && self.Object === Object && self, h = y || g || Function("return this")(), w = Object.prototype, k = w.toString, x = Math.max, j = Math.min, O = function () { return h.Date.now() }; e.exports = o }).call(t, function () { return this }()) }, function (e, t) { (function (t) { "use strict"; function n(e, t, n) { function i(t) { var n = b, o = v; return b = v = void 0, O = t, g = e.apply(o, n) } function r(e) { return O = e, h = setTimeout(s, t), _ ? i(e) : g } function u(e) { var n = e - w, o = e - O, i = t - n; return S ? x(i, y - o) : i } function f(e) { var n = e - w, o = e - O; return void 0 === w || n >= t || n < 0 || S && o >= y } function s() { var e = j(); return f(e) ? d(e) : void (h = setTimeout(s, u(e))) } function d(e) { return h = void 0, z && b ? i(e) : (b = v = void 0, g) } function l() { void 0 !== h && clearTimeout(h), O = 0, b = w = v = h = void 0 } function p() { return void 0 === h ? g : d(j()) } function m() { var e = j(), n = f(e); if (b = arguments, v = this, w = e, n) { if (void 0 === h) return r(w); if (S) return h = setTimeout(s, t), i(w) } return void 0 === h && (h = setTimeout(s, t)), g } var b, v, y, g, h, w, O = 0, _ = !1, S = !1, z = !0; if ("function" != typeof e) throw new TypeError(c); return t = a(t) || 0, o(n) && (_ = !!n.leading, S = "maxWait" in n, y = S ? k(a(n.maxWait) || 0, t) : y, z = "trailing" in n ? !!n.trailing : z), m.cancel = l, m.flush = p, m } function o(e) { var t = "undefined" == typeof e ? "undefined" : u(e); return !!e && ("object" == t || "function" == t) } function i(e) { return !!e && "object" == ("undefined" == typeof e ? "undefined" : u(e)) } function r(e) { return "symbol" == ("undefined" == typeof e ? "undefined" : u(e)) || i(e) && w.call(e) == s } function a(e) { if ("number" == typeof e) return e; if (r(e)) return f; if (o(e)) { var t = "function" == typeof e.valueOf ? e.valueOf() : e; e = o(t) ? t + "" : t } if ("string" != typeof e) return 0 === e ? e : +e; e = e.replace(d, ""); var n = p.test(e); return n || m.test(e) ? b(e.slice(2), n ? 2 : 8) : l.test(e) ? f : +e } var u = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) { return typeof e } : function (e) { return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e }, c = "Expected a function", f = NaN, s = "[object Symbol]", d = /^\s+|\s+$/g, l = /^[-+]0x[0-9a-f]+$/i, p = /^0b[01]+$/i, m = /^0o[0-7]+$/i, b = parseInt, v = "object" == ("undefined" == typeof t ? "undefined" : u(t)) && t && t.Object === Object && t, y = "object" == ("undefined" == typeof self ? "undefined" : u(self)) && self && self.Object === Object && self, g = v || y || Function("return this")(), h = Object.prototype, w = h.toString, k = Math.max, x = Math.min, j = function () { return g.Date.now() }; e.exports = n }).call(t, function () { return this }()) }, function (e, t) { "use strict"; function n(e, t) { var n = new r(o); a = t, n.observe(i.documentElement, { childList: !0, subtree: !0, removedNodes: !0 }) } function o(e) { e && e.forEach(function (e) { var t = Array.prototype.slice.call(e.addedNodes), n = Array.prototype.slice.call(e.removedNodes), o = t.concat(n).filter(function (e) { return e.hasAttribute && e.hasAttribute("data-aos") }).length; o && a() }) } Object.defineProperty(t, "__esModule", { value: !0 }); var i = window.document, r = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver, a = function () { }; t.default = n }, function (e, t) { "use strict"; function n(e, t) { if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function") } function o() { return navigator.userAgent || navigator.vendor || window.opera || "" } Object.defineProperty(t, "__esModule", { value: !0 }); var i = function () { function e(e, t) { for (var n = 0; n < t.length; n++) { var o = t[n]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, o.key, o) } } return function (t, n, o) { return n && e(t.prototype, n), o && e(t, o), t } }(), r = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i, a = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i, u = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i, c = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i, f = function () { function e() { n(this, e) } return i(e, [{ key: "phone", value: function () { var e = o(); return !(!r.test(e) && !a.test(e.substr(0, 4))) } }, { key: "mobile", value: function () { var e = o(); return !(!u.test(e) && !c.test(e.substr(0, 4))) } }, { key: "tablet", value: function () { return this.mobile() && !this.phone() } }]), e }(); t.default = new f }, function (e, t) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); var n = function (e, t, n) { var o = e.node.getAttribute("data-aos-once"); t > e.position ? e.node.classList.add("aos-animate") : "undefined" != typeof o && ("false" === o || !n && "true" !== o) && e.node.classList.remove("aos-animate") }, o = function (e, t) { var o = window.pageYOffset, i = window.innerHeight; e.forEach(function (e, r) { n(e, i + o, t) }) }; t.default = o }, function (e, t, n) { "use strict"; function o(e) { return e && e.__esModule ? e : { default: e } } Object.defineProperty(t, "__esModule", { value: !0 }); var i = n(12), r = o(i), a = function (e, t) { return e.forEach(function (e, n) { e.node.classList.add("aos-init"), e.position = (0, r.default)(e.node, t.offset) }), e }; t.default = a }, function (e, t, n) { "use strict"; function o(e) { return e && e.__esModule ? e : { default: e } } Object.defineProperty(t, "__esModule", { value: !0 }); var i = n(13), r = o(i), a = function (e, t) { var n = 0, o = 0, i = window.innerHeight, a = { offset: e.getAttribute("data-aos-offset"), anchor: e.getAttribute("data-aos-anchor"), anchorPlacement: e.getAttribute("data-aos-anchor-placement") }; switch (a.offset && !isNaN(a.offset) && (o = parseInt(a.offset)), a.anchor && document.querySelectorAll(a.anchor) && (e = document.querySelectorAll(a.anchor)[0]), n = (0, r.default)(e).top, a.anchorPlacement) { case "top-bottom": break; case "center-bottom": n += e.offsetHeight / 2; break; case "bottom-bottom": n += e.offsetHeight; break; case "top-center": n += i / 2; break; case "bottom-center": n += i / 2 + e.offsetHeight; break; case "center-center": n += i / 2 + e.offsetHeight / 2; break; case "top-top": n += i; break; case "bottom-top": n += e.offsetHeight + i; break; case "center-top": n += e.offsetHeight / 2 + i }return a.anchorPlacement || a.offset || isNaN(t) || (o = t), n + o }; t.default = a }, function (e, t) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); var n = function (e) { for (var t = 0, n = 0; e && !isNaN(e.offsetLeft) && !isNaN(e.offsetTop);)t += e.offsetLeft - ("BODY" != e.tagName ? e.scrollLeft : 0), n += e.offsetTop - ("BODY" != e.tagName ? e.scrollTop : 0), e = e.offsetParent; return { top: n, left: t } }; t.default = n }, function (e, t) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); var n = function (e) { return e = e || document.querySelectorAll("[data-aos]"), Array.prototype.map.call(e, function (e) { return { node: e } }) }; t.default = n }]) }); 2 | 3 | document.getElementsByTagName("head")[0].insertAdjacentHTML( 4 | "beforeend", 5 | ""); 6 | 7 | window.addEventListener("load", function () { 8 | AOS.init(); 9 | }); 10 | 11 | // Not currently used 12 | window.animator = { 13 | remove: function () { 14 | console.log("removing"); 15 | var animatedPage = document.querySelector('#animator-page[data-aos]'); 16 | animatedPage.classList.remove("aos-animate"); 17 | }, 18 | show: function () { 19 | console.log("show"); 20 | var animatedPage = document.querySelector('#animator-page[data-aos]'); 21 | animatedPage.classList.add("aos-animate"); 22 | }, 23 | 24 | display: function (elementName) { 25 | console.log(options); 26 | var element = document.getElementById(elementName); 27 | if (element) { 28 | element.classList.add("aos-animate"); 29 | } 30 | }, 31 | 32 | hide: function (elementName) { 33 | var element = document.getElementById(elementName); 34 | if (element) { 35 | element.classList.remove("aos-animate"); 36 | } 37 | } 38 | }; --------------------------------------------------------------------------------