Animsition 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00512/article/details/141837347

Animsition 项目教程

animsitionA simple and easy jQuery plugin for CSS animated page transitions.项目地址:https://gitcode.com/gh_mirrors/an/animsition

1、项目介绍

Animsition 是一个简单易用的 jQuery 插件，用于实现 CSS 动画页面过渡效果。该项目由 blivesta 开发，并在 GitHub 上开源。Animsition 提供了多种动画效果，如淡入淡出、旋转、翻转等，可以轻松地为网页添加动态过渡效果，提升用户体验。

2、项目快速启动

安装

首先，从 GitHub 克隆项目到本地：

git clone https://github.com/blivesta/animsition.git

引入文件

在 HTML 文件中引入必要的 CSS 和 JavaScript 文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Animsition 示例</title>
    <link rel="stylesheet" href="dist/css/animsition.min.css">
</head>
<body>
    <div class="animsition">
        <a href="page1.html" class="animsition-link">页面1</a>
        <a href="page2.html" class="animsition-link">页面2</a>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="dist/js/animsition.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.animsition').animsition({
                inClass: 'fade-in',
                outClass: 'fade-out',
                inDuration: 1500,
                outDuration: 800,
                linkElement: '.animsition-link',
                loading: true,
                loadingParentElement: 'body',
                loadingClass: 'animsition-loading',
                timeout: false,
                timeoutCountdown: 5000,
                onLoadEvent: true,
                browser: ['animation-duration', '-webkit-animation-duration'],
                overlay: false,
                overlayClass: 'animsition-overlay-slide',
                overlayParentElement: 'body'
            });
        });
    </script>
</body>
</html>