怎么使用vue实现动画效果
本文讲解"如何使用vue实现动画效果",希望能够解决相关问题。
Vue封装的过度与动画
1.作用
在插入,更新,移除DOM元素时,在合适的时候给元素添加样式类名。
2.写法
准备好样式:元素进入的样式
<template> <div> <button @click="isShow = !isShow">隐藏展示</button> <transition name="hidden" appear> <h2 v-show="isShow">隐藏展示</h2> </transition> </div> </template> <script> export default { name: "Test", data() { return { isShow: true }; } }; </script> <style scoped> h2 { background-color: orange; } .hidden-enter-active { animation: shanyu 1s; } .hidden-leave-active { animation: shanyu 1s reverse; } @keyframes shanyu { from { transform: translateX(-100%); } to { transform: translateX(0px); } } </style>
3.样式
需要先有这个animate.css哦
npm i animate.css
1.v-enter:进入的起点
2.v-enter-active:进入过程中
3.v-enter-to:进入的终点
<template> <div> <button @click="isShow = !isShow">隐藏展示</button> <transition-group name="shanyu" appear> <h2 v-show="isShow" key = '1'>隐藏展示</h2> <h2 v-show="isShow" key = '2'>隐藏展示</h2> </transition-group> </div> </template> <script> export default { name: "Test2", data() { return { isShow: true }; } }; </script> <style scoped> h2 { background-color: rgb(139, 37, 255); } /* 进入的起点,离开的起点 */ .shanyu-enter, .shanyu-leave-to { transform: translateX(-100%); } .shanyu-enter-active,.shanyu-leave-active{ transition: .5s linear; } /* 进入的终点离开的终点 */ .shanyu-enter-to, .shanyu-leave { transform: translateX(0); } </style>
元素离开的样式:
1.V-leave:离开的起点
2.V-leave-active:离开过程中
3.V-leave-to:离开的终点
4.使用<transition>包裹要过度的元素,并配置name属性
<transitionname="hello"> <h2v-show=" isShow">你好啊! </h2> </transition>
备注:若有多个元素需要过度,则需要使用: <transition-group>, 且每个元素都要指定key值。
<transition-group name="shanyu" appear> <h2 v-show="isShow" key = '1'>隐藏展示</h2> <h2 v-show="isShow" key = '2'>隐藏展示</h2> </transition-group>
关于 "如何使用vue实现动画效果" 就介绍到此。希望多多支持编程宝库。
Vue中插槽和配置代理如何使用:本文讲解"Vue中插槽和配置代理怎么使用",希望能够解决相关问题。一,插槽1.什么是插槽让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件——>子组件。插槽分为三种,分 ...