Vue2-animate实现Vue.js 2.0动画过渡效果
下载需积分: 50 | 125KB |
更新于2025-02-20
| 44 浏览量 | 举报
收藏
立即下载 ### 知识点详解
#### 1. Vue.js 2.0端口概念
在讨论`vue2-animate`之前，有必要解释一下“端口”这一概念。在软件开发中，一个端口通常指的是一个程序或库被改编或移植到另一个平台的过程。在这个案例中，`vue2-animate`是将流行CSS动画库`Animate.css`适配到Vue.js 2.0的过程。对于前端开发者而言，这意味着可以利用Vue.js框架的特性来使用Animate.css提供的动画效果。
#### 2. Animate.css库介绍
`Animate.css`是一个跨浏览器的CSS3动画库，它通过预定义的CSS类来实现各种动画效果。它支持简单的动画触发和复杂动画序列，为开发者提供了一种方便的方式，来给网页元素添加生动的动画效果。
#### 3. Vue.js 2.0与Vue.js 3.0的不同
`vue2-animate`支持Vue.js的两个主要版本，即Vue.js 2.0和Vue.js 3.0。Vue.js 3.0是Vue.js的最新版本，它在性能、功能和API上都进行了一系列的改进。比如，Vue.js 3.0引入了Composition API，提供了更好的TypeScript支持和更多的响应式系统优化。尽管两个版本的功能有一些差异，但是`vue2-animate`都能兼容使用，为不同版本的Vue.js开发者提供便利。
#### 4. 跨浏览器CSS3动画
由于`vue2-animate`是基于`Animate.css`，它支持各种现代浏览器，通常包括Chrome、Firefox、Safari、Edge等主流浏览器。对于开发者来说，这意味着他们可以更专注地编写功能代码，而不用担心跨浏览器兼容性问题。
#### 5. Vue的内置转换（Transition）系统
Vue.js内置了一个强大的转换系统，用于在元素插入和删除时提供过渡或动画效果。这个系统是Vue响应式数据更新的一部分，能够自动检测DOM的变化并应用相应的动画效果。`vue2-animate`是与这个转换系统紧密结合的，它提供了现成的动画类集合，可以直接应用于Vue组件或元素。
#### 6. 安装方法
要使用`vue2-animate`，需要按照一定的方式进行安装，以便在项目中引入该库：
- **通过npm安装：**
```shell
npm install vue2-animate --save
```
- **通过yarn安装：**
```shell
yarn add vue2-animate
```
- **通过CDN引入：**
在HTML文件中通过`<link>`标签引入对应的CSS文件，或者在JavaScript中全局引入Vue和`vue2-animate`。
```html
<!-- 包括样式表 -->
<head>
<link rel="stylesheet" href="vue2-animate.min.css">
</head>
```
```javascript
// 通过CDN在JavaScript中引入
<script src="https://unpkg.com/vue2-animate/dist/vue2-animate.min.js"></script>
```
#### 7. SCSS版本
`vue2-animate`不仅提供了预编译的CSS版本，也支持SCSS版本。这意味着，如果你的项目使用SCSS作为样式表预处理器，你可以直接通过SCSS方式引用`Animate.css`，从而提供更高的灵活性和可定制性。
#### 8. 信用与贡献
文档中提到，虽然原始作者是为Vue 1.x版本创建的`vue2-animate`，而SCSS版本是由另一个作者创建的。但当前的维护者是负责当前版本的更新与维护。这表明开源项目中，社区的贡献非常重要，并且需要鼓励开发者的反馈和贡献。
#### 9. Vue.js相关技术标签解析
- **Vue.js**: 一个渐进式的JavaScript框架，用于构建用户界面。
- **animation**: 动画是使元素发生变化的过程，CSS提供了强大的动画能力。
- **transition**: Vue.js内置的一个指令，用于过渡效果的实现。
- **vue-transition**: 是Vue.js中用于创建过渡动画效果的组件。
- **Vue.jsSCSS**: 表示使用SCSS预处理器编写的Vue.js样式。
#### 10. 关于vue2-animate-master
`vue2-animate-master`文件夹的名称暗示这是`vue2-animate`项目的主版本，很可能包含所有源代码、文档和构建脚本。对于开发者来说，如果想要查看源代码或贡献代码，这会是他们需要访问的资源。
总结起来，`vue2-animate`允许开发者通过简单地引用一个CSS库，来为Vue.js应用提供美观的过渡效果和动画。这一工具大大简化了在Vue.js项目中实现复杂动画效果的过程，使得Web开发者能够专注于核心功能的开发，同时不必担心动画效果的实现细节。
资源目录
Vue2-animate实现Vue.js 2.0动画过渡效果 （104个子文件） 
all.scss 168B fadeLeft.scss 270B flipOutY.scss 250B slideDown.less 310B fadeRightBig.scss 280B all.scss 184B fadeRightBig.less 280B bounce.scss 693B
logo.png 11KB flip.scss 2KB rotateDownRight.scss 430B slideRight.scss 311B slideUp.less 306B bug_report.md 542B package.json 1KB fadeUpBig.less 270B README.md 5KB rotateDownLeft.scss 424B all.less 160B fadeUpBig.scss 276B flipInY.less 474B rotateUpLeft.less 420B slideRight.less 311B make-transitions.scss 2KB package-lock.json 200KB fadeDown.less 269B rotate.less 390B vue2-animate.scss 733B
index.html 9KB flipInX.scss 475B zoomUp.less 743B zoom.scss 262B flipOutX.less 250B fadeDownBig.scss 279B fadeLeft.less 270B rotateDownRight.less 430B rotateUpLeft.scss 420B bounceUp.scss 653B flipInY.scss 475B flipOutY.less 249B lightSpeed.less 400B fadeLeftBig.scss 280B bounceLeft.less 580B bounceDown.less 638B flipInX.less 474B all.less 86B fadeDown.scss 269B vue2-animate.css.map 43KB vue2-animate.min.css 52KB bounceRight.scss 584B fusionfile.js 1KB zoomRight.less 596B bounceLeft.scss 580B vue2-animate.css.map 43KB vue2-animate.css 69KB fadeRight.scss 270B fadeLeftBig.less 280B all.scss 214B vue2-animate.css 69KB release.js 1KB slideUp.scss 306B .npmignore 98B fadeUp.scss 265B all.less 176B fadeDownBig.less 279B zoomDown.scss 747B rotate.scss 390B bounce.less 693B slideLeft.less 311B bower.json 511B all.scss 295B flip.less 2KB bounceUp.less 653B zoomLeft.scss 593B lightSpeed.scss 400B all.less 287B LICENSE 1KB zoomUp.scss 743B zoom.less 262B fadeUp.less 265B all.less 151B bounceDown.scss 638B make-transitions.less 1KB all.less 141B vue2-animate.min.css 53KB fadeRight.less 270B slideDown.scss 310B .gitignore 45B bounceRight.less 584B vue2-animate.less 546B rotateUpRight.scss 426B rotateUpRight.less 426B all.less 206B slideLeft.scss 311B fade.less 159B zoomDown.less 747B zoomLeft.less 593B rotateDownLeft.less 424B zoomRight.scss 596B flipOutX.scss 250B共 104 条
- 1
- 2
相关推荐
<template>
![]()
![]()
<logo-svg class="logo-svg" />
<router-link :to="{name:'home'}" class="logo-text">
{{appStore.title}}
</router-link>
<template v-for="m in menus">
{{m.text}}
<router-link v-else :to="{name: m.code}"
@click="play"
class="menu-item nav-ab t" :class="m.code">
{{m.text}}
</router-link>
</template>
欢迎你，超级管理员
<el-button size="small" type="primary" plain class="is-square" icon="Sunny" @click="appStore.toggleTheme()"></el-button>
<el-button size="small" type="primary" plain class="is-square" icon="FullScreen" @click="toggleFullscreen()"></el-button>
<el-button size="small" type="primary" plain class="is-square" icon="MoreFilled"></el-button>
<el-button size="small" type="danger" plain>退出</el-button>
</template>
<script setup lang="ts">
import _ from "lodash"
import {computed, onMounted, ref, onUnmounted} from "vue";
import {useAppStore} from "@/services/store/app";
import {Howl} from 'howler';
import menuSound from "@/assets/medias/menu.mp3"
import {useNow, useDateFormat, useDark} from '@vueuse/core'
import animate1Image from "./images/animate-1.png"
import animate2Image from "./images/animate-2.png"
import logoSvg from "@/assets/images/logo.svg"
const appStore = useAppStore();
const now = useNow();
const nowTime = ref('')
const timer = ref()
const isDark = useDark();
//region sound
var sound = new Howl({
src: [menuSound],
volume: .4
});
const play = () => {
sound.play();
};
//endregion
const menus = [
{code:'home', text:'首页', icon:'mdi-home'},
{code:'network', text:'网络', icon:'mdi-lan'},
{code:'transfer', text:'数据', icon:'mdi-transfer'}/*,
{code:'stat', text:'检索统计', icon:'mdi-chart-bar-stacked', href: headerQueryMenuUrl},
{code:'manage', text:'后台管理', icon:'mdi-monitor-dashboard', href:headerManageMenuUrl}*/
];
import {usePageAnimate} from "@/services/hook/usePageAnimate";
import axios from "axios";
usePageAnimate("nav-ab");
onMounted(() => {
});
onUnmounted(()=> {
})
import { useFullscreen } from '@vueuse/core'
import {headerManageMenuUrl, headerQueryMenuUrl} from "@/services/config";
const { isFullscreen, enter, exit, toggle: toggleFullscreen } = useFullscreen()
</script>
<style lang="scss" scoped>
@use "sass:math";
@import "@/assets/css/_var";
$padding: 36px;
.nav {
position:absolute;
left:$padding;right:$padding;top:$padding;
z-index:10;
height:80px;
backdrop-filter: blur(3px);
//box-shadow: 0 1px 10px rgba(0,0,0,.3)
//background-color: rgba(red,.5);
}
.header-bg {
//height: 90px;
width:100%;
//background: url(./images/header-bg.png) no-repeat bottom center;
//background-size: contain;
position: absolute;
z-index:0;
top:0;left:0;right:0;bottom:0;
border-top: transparent solid 6px;
border-bottom: transparent solid 1px;
background: rgba($-primary-color, 0.3);
border-top-color:$-primary-color;
border-bottom-color: $-primary-color;
box-shadow: 0 0 6px #035f71;
&:after {
content:"";
position: absolute;top:0;bottom:0;left:0;right:0;
//background: linear-gradient(45deg , rgba($-primary-color , .5) 60%, $-primary-color);
}
}
.right-side {
position: relative;
}
.logo-con {
display: flex; align-items: center; justify-content: center;
}
.logo-border {
//background:rgba(255,255,255,.1);
padding:0 25px;display:flex;align-items:center;
height:100%;
position:relative;z-index:1;
border-top:transparent solid 6px;
border-bottom:transparent solid 6px;
box-shadow: 1px 0 10px rgba(0,0,0,.2);
border-color: rgba($-primary-color, 1);;
}
.logo-svg {
width:60px;margin-left1:10px;
//filter: drop-shadow( 0px 0px 6px rgba(#bcffff, .3));
//fill: #00c8e1;
:deep {
path {fill:#253223}
path.lightning {
fill:#ffcc00;
stroke-width: 0;
}
//.circle-middle {
// fill: #ffcc00;
//}
.dot {fill:#ffcc00;}
.circle-bg {fill:transparent}
}
}
.logo-text {
padding-left:20px;
font-family: shuhei;font-size:42px;
margin-top:3px;
text-shadow1: 5px 5px 1px rgba(255,255,255,.1);
filter: drop-shadow( 1px 1px 2px #253223);
background-image: -webkit-linear-gradient(90deg, rgb(245, 255, 250) , $-primary-color );
//background-image: linear-gradient(180deg,#fff,#2af1f8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.menu-con {
display: flex;
flex:1;
justify-content: center;
position:relative;z-index:1;
margin-top:6px;
}
.menu-item {
display: flex;
align-items: center;justify-content: center;
border:rgba(#253223,.9) solid 1px;
background: rgba($-primary-color,.4);
color:rgba(#253223, .8);
border-radius:2px;
width:150px;height:44px;
margin:0 15px;
background-size:cover;
text-align:center;
font-size:20px;
font-family: fzzzh;
font-weight: normal;
letter-spacing: 5px;
transition: all .3s;
span.mdi {opacity: .9}
&:after, &:before {
transition: all .3s;
content:'';
position: absolute;
width:3px;height:24px;
background: rgba(#253223,.6)
}
&:before {left:0;}
&:after {
right:0;
}
&:hover {
border-color:#253223;
color:#253223;
background: rgba(#fff, .8);
&:after, &:before {
height:28px;
background: rgba(#253223,.9)
}
&:after {right:3px}
&:before {left:3px}
}
&.router-link-active {
span.mdi {opacity: 1}
color: $-primary-color;
border-width:2px;
border-radius:4px;
border-color:$-primary-color;
background: rgba(14, 31, 14,.9);
font-weight:bold;
box-shadow: 0 0 8px #253223;
&:after, &:before {
width:4px;
background: rgba($-primary-color,.8)
}
}
&.job, &.live, &.vehicle{
text-decoration: line-through;
}
}
.animate-blocks {
width: 55px;
height: 25px;
left: 662px;
top: 74px;
position: absolute;
visibility: visible;
pointer-events: none;
transition: transform 600ms;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.animate-block-item {
width:8px;height:10px;
background: linear-gradient(to right , rgba(120, 255, 255, .8) , transparent);
transform: skewX(-40deg);
border-radius:1px;
}
.animate-1-con {
position: absolute;
pointer-events: none;
left: 399px;
top: 0;
width: 120px;
height: 100%;
opacity:.3;
}
.animate-1-img {
width:100%;height:100%;
border-radius: unset;
cursor: pointer;
pointer-events: none;
animation-name: animate-1;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 5s;
animation-delay: 0s;
-webkit-user-drag: none;
filter: none;
}
@keyframes animate-1 {
0% {
opacity: 0;
transform: none;
}
15% {
opacity: 0.75;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(150px, 0px, 0px);
}
30% {
opacity: 1;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(300px, 0px, 0px);
}
45% {
opacity: 0.75;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(450px, 0px, 0px);
}
60% {
opacity: 0;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(600px, 0px, 0px);
}
100% {
opacity: 0;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(600px, 0px, 0px);
}
}
.animate-2-con {
position: absolute;
pointer-events: none;
left: 646px;
bottom: 0;
width: 120px;
height: 60%;
opacity:.3;
}
.animate-2-img {
width:100%;height:100%;
border-radius: unset;
cursor: pointer;
pointer-events: none;
animation-name: animate-2;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 4s;
animation-delay: 0s;
-webkit-user-drag: none;
filter: none;
}
@keyframes animate-2 {
0% {
opacity: 0;
transform: none;
}
50% {
opacity: .78;
transform: translateX(450px);
}
100% {
opacity: 0;
transform: translateX(900px);
}
}
$star-width: math.div(1120px, 1.5);
$star-height: math.div(660px, 1.5);
.star {
position:absolute;top:-113px;left:-10px;
width:$star-width;height:$star-height;
background: url(./images/star.png) no-repeat bottom center;
background-size: cover;
animation-name: star-animate;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 10s;
animation-delay: 10s;
-webkit-user-drag: none;
//filter: brightness(150%);
}
@keyframes star-animate {
0% {
opacity: 1;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
div.nav.dark {
.header-bg {
border-top-color:rgb(71, 128, 76);
border-bottom-color:rgba(6, 253, 253, .15);
background: rgba($-primary-color, 0.3);
//background-color: rgba(106, 211, 137, 0.12);
&:after {
background: linear-gradient(-45deg , rgba(0,0,0,.4), transparent);
}
}
.logo-border {
border-color: rgb(71, 128, 76);
}
.logo-text {
background-image: -webkit-linear-gradient(90deg, rgb(150, 248, 140) 0%, rgb(245, 255, 250) 90%);
}
.logo-svg {
:deep {
path {fill:rgba(113, 228, 102,.6)}
path.lightning {
fill:#ffcc00;
stroke-width: 0;
}
//.dot {fill:rgba(#fff,.7);}
.circle-bg {fill:transparent}
}
}
$-menu-color: #71e466; //7cffff
.menu-item {
border:rgba($-menu-color,.3) solid 1px;
background: rgba(0,0,0,.2);
color:rgba($-menu-color, .5);
&:after, &:before {
background: rgba($-menu-color,.3)
}
&:hover {
border-color:$-menu-color;
color:$-menu-color;
background: rgba($-menu-color, .1);
&:after, &:before {
background: rgba($-menu-color,.6)
}
}
&.router-link-active {
color: $-menu-color;
border-color:$-menu-color;
&:after, &:before {
background: rgba($-menu-color,.8)
}
}
}
}
</style>
<logo-svg class="logo-svg" />
<router-link :to="{name:'home'}" class="logo-text">
{{appStore.title}}
</router-link>
<template v-for="m in menus">
{{m.text}}
<router-link v-else :to="{name: m.code}"
@click="play"
class="menu-item nav-ab t" :class="m.code">
{{m.text}}
</router-link>
</template>
欢迎你，超级管理员
<el-button size="small" type="primary" plain class="is-square" icon="Sunny" @click="appStore.toggleTheme()"></el-button>
<el-button size="small" type="primary" plain class="is-square" icon="FullScreen" @click="toggleFullscreen()"></el-button>
<el-button size="small" type="primary" plain class="is-square" icon="MoreFilled"></el-button>
<el-button size="small" type="danger" plain>退出</el-button>
戴剑松
- 粉丝: 40
我的内容管理
展开
最新资源
- Docker基础教程：容器与镜像构建指南
- 六月毕业季友情贺卡动画素材下载
- 劳动节专属AI矢量素材海报设计
- 七夕情人节祝福动画素材 - 传统文化庆祝
- 中秋海报设计素材：创意观灯男女矢量图
- HTML/CSS/JavaScript构建的个人博客网站
- 网络管理员求职专用简历模板免费下载
- 构建基于区块链的去中心化投票系统原型
- Nathan Contino 个人网站搭建教程与本地运行指南
- 健康沙拉矢量海报素材：AI格式设计食谱
- XCSoar文件管理器数据存储库：地形、空域与航点下载
- 小黄鸭洗澡卡通矢量素材下载
- 感恩节彩绘背景矢量素材 AI格式下载
- 免费提供渐变创意登陆页面矢量素材
- 矢量素材分享：4款蓝色医用口罩设计图
- EPS格式卡通绅士设计矢量素材下载
- 企业信息展示用EPS格式图表矢量素材集
- 教育主题手绘素材 免费矢量图下载
- AI矢量格式绿色婚礼请柬模板设计
- 浪漫七夕情人节Flash动画贺卡下载
- 幼儿园卡通简笔画填色Flash动画素材包
- efrt压缩技术：键值数据压缩新方案
- 圣诞节动画歌曲Flash素材包下载
- 圣诞节专属动画素材：蓝色雪人圣诞场景
