版权声明：当前文章版权为本人所有，转载请提前联系本人，并附以地址说明。 https://blog.csdn.net/D_claus/article/details/85052095
要想让动画发生，还得要有元素状态的改变。如何改变元素状态呢，当然就是在css中给这个元素定义一个类（:hover等伪类也可以），或者控制元素的显示隐藏，也可改变元素的状态，这个类描述的是过渡动画结束时元素的状态。
transition动画
vue结合原生css动画:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .show-enter-active,.show-leave-active{ transition:all 0.4s ease; padding-left: 10px; } .show-enter,.show-leave-active{ padding-left: 100px; } </style> <script src="../vue221.js"></script> </head> <body> <div id="app"> <button @click="toggle">隐藏和显示</button> <br> <transition name="show"> <span v-show="isshow">{{msg}}</span> </transition> </div> </body> <script> new Vue({ el:'#app', data:{ isshow :false, msg:'hello vuejs' }, methods:{ toggle :function(){ this.isshow = !this.isshow; } } }); </script> </html>钩子函数实现动画效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .show{ transition:all 0.3s ease; } </style> <script src='../vue221.js'></script> </head> <body> <div id="app"> <button @click="toggle">显示和隐藏数据</button><br> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div v-if="isshow" class="show">hello vuejs</div> </transition> </div> </body> <script> var vm = new Vue({ el:'#app', data:{ isshow:false }, methods:{ toggle:function(){ this.isshow = !this.isshow; }, beforeEnter:function(el){ el.style.transform = "translate(100px,0)"; }, enter:function(el,done){ el.offsetWidth; el.style.transform = "translate(0px,0)"; done(); }, afterEnter:function(el){ this.isshow = !this.isshow; } } }); </script> </html>
animation.....@keyframes动画
当前只贴上html和css代码：
<div id="modalBox" v-show="modalStatus" @click="modalStatus=false"> <div class="modalContent" @click.stop> <div class="modalBody"> <h4>请选择您前往目的地的交通方式</h4> </div> <div class="chooseBtn"> <span :style="{backgroundColor:colorStatus}" @click="chooseGoStyle(1)">私车</span> <span @click="chooseGoStyle(2)" :style="{backgroundColor:colorStatus1}">乘车</span> </div> <footer class="modalFooter"> <button id="surebBtn" :disabled="comfirmBtnStatus" :style="{backgroundColor:colorStatus2}" @click="confirmBtn">确定</button> </footer> </div> </div>#modalBox h4{ text-align: center; padding:0.6rem 0; color: rgb(102, 102, 102); font-family: "Arial Negreta", "Arial Normal", "Arial"; font-size: 0.6rem; font-style: normal; font-weight: 700; visibility: visible; word-wrap: break-word; } #modalBox{ /*display: none;*/ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 1000; background-color: rgba(0,0,0,0.5); display:-webkit-flex; justify-content:center; align-items:center; } .modalContent{ display: flex; flex-flow: column nowrap; justify-content: space-between; width: 80%; max-width: 700px; /*height: 40%;*/ /*max-height: 500px;*/ margin: 100px auto; border-radius:10px; background-color:#fff; -webkit-animation: zoom 0.6s; animation: zoom 0.6s; resize: both; overflow: auto; position: relative; z-index: 1002; } @-webkit-keyframes zoom{ from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} } @keyframes zoom{ from {transform: scale(0)} to {transform: scale(1)} } .modalBody{ padding: 10px; font-size: 16px; box-sizing:border-box; } .modalFooter{ box-sizing:border-box; /*border-top:1px solid #ccc;*/ display: flex; padding:0.6rem 0; justify-content: center; align-items: center; } .modalContent .chooseBtn{ display: flex; padding:1rem 0; justify-content: center; } .modalContent .chooseBtn span { display: inline-block; font-size: 0.6rem; padding: 0.3rem 0; width: 6rem; border-radius: 5%; /*background-color: rgba(170, 206, 58, 1);*/ background-color: rgba(221, 221, 221, 1); text-align:center; color: rgb(255, 255, 255); font-family: "Arial Normal", "Arial"; font-style: normal; font-weight: 400; } .modalContent .chooseBtn span:nth-of-type(1){ margin-right: 0.2rem; } .modalContent .chooseBtn span:nth-of-type(2){ margin-left: 0.2rem; } .modalFooter button { display: inline-block; border-width:0px; width:13rem; padding:0.35rem 0; font-size: 0.65rem; background:inherit; background-color:rgba(204, 204, 204, 1); border:none; border-radius:5px; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; color: rgb(255, 255, 255); }粗浅见识，相互交流。