动画效果
我们使用vue脚手架,创建模板后,新建一个自定义组件Test.vue。代码如下
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<h1 v-show="isShow">你好啊!</h1>
</div>
</template>
<script>
export default {
name: "Test",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
h1 {
background-color: coral;
}
</style>
修改App.vue代码如下:
<template>
<div class="app">
<Test />
</div>
</template>
<script>
import Test from "./components/Test.vue";
export default {
name: "App",
components: { Test },
};
</script>
然后运行下看看输出页面的效果如下:
随后我们在Test.vue里开始追加代码,完成显示或隐藏时的动画效果。
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<h1 v-show="isShow" class="come">你好啊!</h1>
</div>
</template>
<script>
export default {
name: "Test",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
h1 {
background-color: coral;
}
/* 使用动画 */
.come {
animation: atguigu 1s;
}
.go {
/* 隐藏消失的时候,动画时间1s,与定义的方向相反 */
animation: atguigu 1s reverse;
}
/* 定义动画需要加前缀@keyframes,并且自定义动画名字atguigu */
@keyframes atguigu {
from {
/* 水平x轴上的改变,-100px表示从最左边出现 */
transform: translateX(-100px);
}
to {
/* 最后来到0px的地方 */
transform: translateX(0px);
}
}
</style>
如果我们想靠vue自动帮我们的文字实现显示和隐藏效果的切换,而不是自己在文字标签上定义显示的true或者false,使用下述代码
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<!-- 想让h1有动画的效果,就用transition把他包裹起来 -->
<transition>
<h1 v-show="isShow">你好啊!</h1>
</transition>
</div>
</template>
<script>
export default {
name: "Test",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
h1 {
background-color: coral;
}
/* 使用动画 */
/* vue内置设计的动画出现时的名字 */
.v-enter-active {
animation: atguigu 1s;
}
/* vue内置设计的动画离开时的名字 */
.v-leave-active {
/* 隐藏消失的时候,动画时间1s,与定义的方向相反 */
animation: atguigu 1s reverse;
}
/* 定义动画需要加前缀@keyframes,并且自定义动画名字atguigu */
@keyframes atguigu {
from {
/* 水平x轴上的改变,-100px表示从最左边出现 */
transform: translateX(-100px);
}
to {
/* 最后来到0px的地方 */
transform: translateX(0px);
}
}
</style>
注意:如果给transistion标签中加了name="hello"等,我们在使用动画的时候,名字要设定为hello-enter-active和hello-leave-active。如果想动画一开始加载网页的时候就显示,那么需要在transition标签中设置一个:appear=“true”
属性或者直接写一个appear即可。
过渡效果
注意其中几个vue内置的名字。过渡用法与动画类似。
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<!-- 想让h1有动画的效果,就用transition把他包裹起来 -->
<transition appear>
<h1 v-show="isShow">你好啊!</h1>
</transition>
</div>
</template>
<script>
export default {
name: "Test2",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
h1 {
background-color: coral;
/* 规定过渡效果的时间等设置 */
transition: 0.5s linear;
}
/* vue内置的名字,意思是进入的起点,写进入起点时的样式 */
.v-enter {
transform: translateX(-100%);
}
/* vue内置的名字,进入的终点,这时的状态是什么样的 */
.v-enter-to {
transform: translateX(0);
}
/* vue内置的名字,意思是离开的起点,写离开起点时的样式 */
.v-leave {
transform: translateX(0);
}
/* vue内置的名字,离开的终点,这时的状态是什么样的 */
.v-leave-to {
transform: translateX(-100%);
}
</style>