vue使用css3动画和过渡使用animate.css
在Vue里面使用css3动画和过渡效果
属性:name 用来生成css过渡类名 例子如果你使用了 v-enter 会替换为 fade-enter
mode mode="" 这个值可以是out-in(先隐藏另外一个再显示另外一个)或者 in-out(先显示再隐藏另外一个),常用于组件的切换
6个时机
v-enter :开始进入
v-enter-after:进入中的过程
v-enter-to:进入完毕
v-leave :准备离开
v-leave-active: 离开的过程
v-leave-to :离开完毕
v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<style>
/* .v-enter {
opacity: 0;
}
.v-enter-active {
transition: all 3s;
}
.v-enter-to,.v-leave{
opacity:1
}
.v-leave-to {
opacity: 0;
}
.v-leave-active {
transition: all 1.5s;
}
*/
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: all 1.5s;
}
style>
head>
<body>
<div id="app">
<transition>
<h1 v-show="isShow">哈哈哈h1>
transition>
<button @click="isShow=!isShow">togglebutton>
div>
<script>
let vue = new Vue({
el: "#app",
data() {
return {
isShow: true
}
}
})
script>
body>
vue使用keyframes
<style>
//声明一个动画
@keyframes move {
0% {
transform: scale(0);
/* 重没有变有 */
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
//进入过程
.fade-enter-active {
transform-origin: left center;
/* 必须要加上中心点,不然效果会乱 */
animation: move 1.5s;
}
//离开过程
.fade-leave-active {
/*必须要加中心的,不然动画会有问题*/
transform-origin: left center;
animation: move 1.5s reverse;
}
style>
head>
<body>
<div id="app">
<transition name="fade" style="text-align: center;">
<h1 v-show="isShow">哈哈哈h1>
transition>
<button @click="handelClick">togglebutton>
div>
<script>
let vue = new Vue({
el: "#app",
data: {
isShow: true,
},
methods: {
handelClick() {
this.isShow = !this.isShow
}
}
})
script>
body>
Vue使用animate.css实现动画
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<style>
.center {
transform-origin: left center;
}
style>
head>
<body>
<div id="app">
<transition name="fead"
mode="out-in"
:appear="true"
enter-active-class="animate__animated animate__rubberBand center"
leave-active-class="animate__animated animate__tada center"
appear-active-class="animate__animated animate__rubberBand center">
>
<h1 v-show="isShow">hello worldh1>
transition>
<button @click="isShow=!isShow">togglebutton>
div>
<script>
let vue = new Vue({
el: "#app",
data() {
return {
isShow: true,
}
},
})
script>
body>
但是 我们还不能控制动画的时间,还有如果我们需要动画加上过渡效果呢?
animate.css++自定义过渡效果
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<style>
#app {
text-align: center;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: all 3s;
}
style>
head>
<body>
<div id="app">
<transition name="fade"
:appear="true"
:duration="3000"
enter-active-class="animate__animated
animate__rubberBand fade-enter-active"
leave-active-class="animate__animated
animate__jello fade-leave-active"
appear-active-class="animate__animated animate__rubberBand ">
<h1 v-show="isShow">hello worldh1>
transition>
<button @click="isShow=!isShow">togglebutton>
div>
<script>
let vue = new Vue({
el: "#app",
data() {
return {
isShow: true,
}
},
})
script>
body>
当我们使用v-for的时候,加上过渡动画
注意
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<style>
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: all 2s;
}
style>
head>
<body>
<div id="app">
<transition-group>
<div v-for="item in list" :key="item.id">{{item.title}}div>
transition-group>
<button @click="handelBtnAddClick">addbutton>
div>
<script>
let vn = new Vue({
el: "#app",
data: {
list: [],
isShow: true,
count: 0
},
methods: {
handelBtnAddClick() {
this.count++
this.list.push({ id: this.count, title: "hello world" })
}
}
})
script>
body>