在Vue里面使用css3动画和过渡效果
<transition>
组件
属性:name 用来生成css过渡类名 例子如果你使用了 <transition name="fade" >
,那么 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">toggle</button>
</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">toggle</button>
</div>
<script>
let vue = new Vue({
el: "#app",
data: {
isShow: true,
},
methods: {
handelClick() {
this.isShow = !this.isShow
}
}
})
</script>
</body>
Vue使用animate.css实现动画
<!-- 引入animate.css cdn库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<!-- 引入vuejs -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.center {
transform-origin: left center;
}
</style>
</head>
<body>
<div id="app">
<!-- 加入animate.css的样式库 appear为true appear-active-class 是显示页面第一次加载触发的的动画
-->
<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 world</h1>
</transition>
<button @click="isShow=!isShow">toggle</button>
</div>
<script>
let vue = new Vue({
el: "#app",
data() {
return {
isShow: true,
}
},
})
</script>
</body>
但是 我们还不能控制动画的时间,还有如果我们需要动画加上过渡效果呢?
animate.css++自定义过渡效果
<!-- 引入animate.css cdn库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<!-- 引入vuejs -->
<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">
<!--这里的appear 和appear-active-class 设置页面打开的时候的动画
type="transition" 已过过渡动画的事件为标准
:duration 可以设置动画和过渡的时长,达到一致 ,可以使用对象,也可以number 如 :duration="1000"或者 :duration="{enter:1000,leave:1500}"-->
<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 world</h1>
</transition>
<button @click="isShow=!isShow">toggle</button>
</div>
<script>
let vue = new Vue({
el: "#app",
data() {
return {
isShow: true,
}
},
})
</script>
</body>
当我们使用v-for的时候,加上过渡动画<transition-group>
注意<transition-group>
子元素必须有key值
<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">add</button>
</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>