vue 提倡数据驱动 不宜操作 dom元素
要完成显示隐藏的过度动画 可以用 官方的<transition>
文章后面再说 官方的<transition>组件
先来看看我自己想到的 过度动画方案 与 理解
动态绑定 class 类名 通过 改变v-if/v-show 的布尔值的时候 动态改变class绑定的类名称
例如 (lang="ts")
<div > <div :class="aniClass" v-if="show" > <div class="btn-box" @click="changeShow"> </div> </div> </div> <script lang="ts"> import { Component, Prop, Vue, Watch } from "vue-property-decorator"; @Component({ components: { }, }) export default class ani extends Vue { aniClass="" show=true changeShow(){ this.aniClass = 'updown-leave-active' 预先定义好的含有动画的类名 setTimeout(()=>{this.show=!this.show},2000) 时间要与动画的持续时间一致 } } </script> <style scoped lang="scss"> /*上下*/ .updown-enter-active{ animation: updown-up 2s; } .updown-leave-active{ animation: updown-down 2s; } @keyframes updown-up { 0%{ transform: translateY(100%); } 100%{ transform: translateY(0); } } @keyframes updown-down { 0%{ transform: translateY(0); } 100%{ transform: translateY(100%); } } } </style>
上述例子,只是适用于简单页面的渐变解决方案,不适用于实际开发,跟着官方脚步走还是用<transition> 较为规范
https://cn.vuejs.org/v2/guide/transitions.html
官方的这样一句话表示 ,需要在特定情况下才能达到过渡效果
v-if 与 v-show 表示 元素的出现与消失,而渐变动画的引入就是 规定他 如何出现 与如何消失 例如(滑动,渐隐,放大.....)
官网的例子已经很为详细,主要的思路就是 为 元素动态增加类名
有了官方的例子 我们也可以 做一定程度的封装 例如:
<template> <transition :name="activeName"> <slot v-if="value"></slot> </transition> </template> <script> export default { name: "index", props:{ value:{ type:Boolean, default:true }, activeName:{ type:String, default: 'fadeyc' } } } </script> <style scoped lang="scss"> .fadeyc-enter { transform: translateX(150%); } .fadeyc-enter-active { transition: all 1.5s; animation: leftToRight 1.5s; } .fadeyc-enter-to { transform: translateX(0); } .fadeyc-leave { } .fadeyc-leave-active { transition: all 1.5s; animation: leftToRightRight 1.5s; } .fadeyc-leave-to { transform: translateX(-150%); } /*缩放应用*/ .scale-enter-active{ animation: bounce-in 1.5s; } .scale-leave-active{ animation: bounce-out 1.5s; } /*缩放*/ @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(0.5); } 100% { transform: scale(1); } } @keyframes bounce-out { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(0); } } /*左右滑动*/ .rightTo-enter-active { animation: leftToRight 1.5s; } .rightTo-leave-active{ animation: leftToRightRight 1.5s; } @keyframes leftToRight { 0%{ transform: translateX(150%); } 100%{ transform: translateX(0); } } @keyframes rightToLeft { 0%{ transform: translateX(0); } 100%{ transform: translateX(-150%); } } @keyframes leftToRightRight { 0%{ transform: translateX(0); } 100%{ transform: translateX(150%); } } /*渐隐*/ .opacity-enter-active { animation: opacity-in 3s; } .opacity-leave-active{ animation: opacity-out 2.5s; } @keyframes opacity-in { 0%{ opacity: 0; } 100%{ opacity: 1; } } @keyframes opacity-out { 0%{ opacity: 1; } 100%{ opacity: 0; } } /*上下*/ .updown-enter-active{ animation: updown-up 1s; } .updown-leave-active{ animation: updown-down 1s; } @keyframes updown-up { 0%{ transform: translateY(100%); } 100%{ transform: translateY(0); } } @keyframes updown-down { 0%{ transform: translateY(0); } 100%{ transform: translateY(100%); } } </style>
调用:
<transitionBox active-name="updown"> <div v-if="show">666</div> </transitionBox>
或者
<transitionBox active-name="updown" v-model="show"> <div>666</div> </transitionBox>
项目中可能会用到很多的动画效果,封装 过后 我们要用的过度动画 就可以集中管理起来 ,后期维护 有很大便利 动画效果就在这一个.vue里面就可以管理。