认识动画。

最新推荐文章于 2024-07-23 19:33:56 发布

先有花裳后有容

最新推荐文章于 2024-07-23 19:33:56 发布

阅读量62

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_62885322/article/details/124680213

版权

认识动画
Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果；
案列：

Hello World的显示和隐藏；
通过下面的代码实现，是不会有任何动画效果的；

<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<h2 v-if="isShow">Hello Word</h2>
</div>
</template>

<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<h2 v-if="isShow">Hello Word</h2>
</div>
</template>

<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition name="fade">
<h2 v-if="isShow">Hello Word</h2>
</transition>
</div>
</template>

.fade-enter-to,
.fade-leave-from {
opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
transition: opacity 1s ease;
}
</style>

<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition name="fade">
<h2 v-if="isShow">Hello Word</h2>
</transition>
</div>
</template>

.fade-enter-to,
.fade-leave-from {
opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
transition: opacity 1s ease;
}
</style>
过渡动画class
v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/动画完成之后移除。
v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被删除)，在过渡/动画完成之后移除。

<template>
<div id="app">
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
</div>
<transition name="bounce">
<h2 class="title" v-if="isShow">Hello Word</h2>
</transition>
</div>
</template>

<template>
<div id="app">
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
</div>
<transition name="bounce" type="transition">
<h2 class="title" v-if="isShow">Hello Word</h2>
</transition>
</div>
</template>

.bounce-enter-from,
.bounce-leave-to {
opacity: 0;
}

.bounce-enter-active,
.bounce-leave-active {
transition: opacity 1s ease;
}

显示的指定动画时间

.bounce-enter-from,
.bounce-leave-to {
opacity: 0;
}

.bounce-enter-active,
.bounce-leave-active {
transition: opacity 2s ease;
}

.bounce-enter-active {
animation: bounce 1s ease;
}
.bounce-leave-active {
animation: bounce 1s ease reverse;
}
@keyframes bounce {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
显示的指定动画时间
我们也可以显示的来指定过渡的时间，通过 duration 属性。
duration可以设置两种类型的值：

number类型：同时设置进入和离开的过渡时间；
object类型：分别设置进入和离开的过渡时间；
<transition name="bounce" type="transition" :duration="1000">
<h2 class="title" v-if="isShow">Hello Word</h2>
</transition>
过渡的模式mode
我们来看当前的动画在两个元素之间切换的时候存在的问题：

我们会发现 Hello World 和 Hello Vue.js是同时存在的：
这是因为默认情况下进入和离开动画是同时发生的；
如果我们不希望同时执行进入和离开动画，那么我们需要设置transition的过渡模式：

in-out: 新元素先进行过渡，完成之后当前元素过渡离开；
out-in: 当前元素先进行过渡，完成之后新元素过渡进入；
<transition name="bounce" mode="out-in">
<h2 class="title" v-if="isShow">Hello Word</h2>
<h2 v-else>Hello Vue.js</h2>
</transition>
动态组件的切换
上面的示例同样适用于我们的动态组件：

appear初次渲染
默认情况下，首次渲染的时候是没有动画的，如果我们希望给他添加上去动画，那么就可以增加另外一个属性appear：

安装animate.css库；
导入animate.css库的样式；
使用animation动画或者animate提供的类；
自定义过渡class
我们可以通过以下 attribute 来自定义过渡类名：

enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css. 结合使用十分有用。
animate.css库的使用
安装animate.css：
npm install animate.css

在main.js中导入animate.css：
import 'animate.css'
用法一：直接使用animate库中定义的 keyframes 动画；
用法二：直接使用animate库提供给我们的类；

先有花裳后有容

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识动画。

认识动画Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果；案列：Hello World的显示和隐藏；通过下面的代码实现，是不会有任何动画效果的；<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <h2 v-if="isShow">Hello Word</h2> </d...
复制链接

扫一扫