About
本文主要讲述了如果在Vue项目中使用css动画效果，包括过渡和动画
同时运用过渡和动画，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate动画</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
<body>
<div id="app" class="container">
<div class="animation">
<transition name="fade"
appear
:duration="{enter:1000, leave:3000}"
enter-active-class="animated bounce fade-enter-active"
leave-active-class="animated jello fade-leave-active"
appear-active-class="animated jello">
<div v-if="isShow">hello world</div>
</transition>
</div>
<button v-if="isShow" @click="handelBtnClick">隐藏</button>
<button v-else @click="handelBtnClick">显示</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow: true,
},
methods: {
handelBtnClick: function () {
this.isShow = !this.isShow;
console.log()
}
}
})
</script>
<style>
.animation {
width: 100px;
height: 50px;
margin-top: 20px;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 3s;
}
</style>
</body>
</html>
效果如图：
动画效果.gif
一、原生动画
使用动画效果需要使用transition标签，可以给标签的name赋值，作为该标签的唯一标识符。
vue动画原理
每一个动画从入场到离场都经历了一系列的过程，在这一过程中会有过渡效果，入场时，vue自动给动画元素添加enter和enter-active两个class，动画开始时会去掉enter这个class，添加enter-to的class，结束时会移出enter-to和enter-active；离场时同样会在开始时添加着一系列的class，只不过将enter改为leave。所以我们只需要在css中给这几个class添加样式就能完成入场和离场的过渡了。
代码：
// html
<transition name="fade"> // transition命名为fade
<div v-if="isShow">hello world</div>
</transition>
// css
.fade-enter, .fade-leave-to { // 声明入场的开始和离场的结束的样式
opacity: 0;
}
.fade-enter-active, .fade-leave-active { // 声明过渡动画持续时间
transition: opacity 3s;
}
除了上述办法，还可以用@keyframes来定义动画效果，代码如下：
// css
@keyframes change-size {
0% {
transform: scale(0);
},
50% {
transform: scale(1.5);
},
100% {
transform: scale(1);
}
}
.fade-enter, .fade-leave-to { // 声明入场的开始和离场的结束的样式
animation: change-size 1s;
}
.fade-enter-active, .fade-leave-active { // 声明过渡动画持续时间
animation: change-size 1s reverse;
}
二、animate库实现动画效果
借助第三方库我们可以轻易实现很多效果非常棒的动画效果。代码如下：
// 首先需要引入这个animate库
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
// 声明动画的区域
<transition name="fade"
appear="true" // 设置开启刚渲染完成后的动画效果
:duration="{enter:1000, leave:3000}" // 设置动画效果的持续周期
enter-active-class="animated bounce " // 设置动画效果 格式为： animated + 效果
leave-active-class="animated jello "
appear-active-class="animated jello">
<div v-if="isShow">hello world</div>
</transition>
网友评论