![transition 两个便签切换，同时在动解决 <transition name="move" mode="out-in" appear> appear属性页面加,第1张](/aiimages/transition+%E4%B8%A4%E4%B8%AA%E4%BE%BF%E7%AD%BE%E5%88%87%E6%8D%A2%EF%BC%8C%E5%90%8C%E6%97%B6%E5%9C%A8%E5%8A%A8%E8%A7%A3%E5%86%B3+%26amp%3Blt%3Btransition+name%3D%26amp%3B%2334%3Bmove%26amp%3B%2334%3B+mode%3D%26amp%3B%2334%3Bout-in%26amp%3B%2334%3B+appear%26amp%3Bgt%3B+appear%E5%B1%9E%E6%80%A7%E9%A1%B5%E9%9D%A2%E5%8A%A0.png "transition 两个便签切换，同时在动解决 <transition name="move" mode="out-in" appear> appear属性页面加,第1张")
<head> <Meta charset="UTF-8"> <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Title>document</Title> <script src="https://cdn.bootCSS.com/vue/2.6.10/vue.Js"></script> <link href="https://cdn.bootCSS.com/twitter-bootstrap/4.3.1/CSS/bootstrap.CSS" rel="stylesheet"> <link href="https://cdn.bootCSS.com/animate.CSS/3.7.1/animate.CSS" rel="stylesheet"> <style> .div1 { wIDth: 200px;height: 200px;background: red }
.move-enter { padding-left: 100px }
.move-enter-active { Transition: all 2s }
.move-enter-to { padding-left: 0px }
.move-leave{ padding-left:0px } .move-leave-active{ Transition: 2s all } .move-leave-to{ padding-left:100px }
</style> </head>
<body> <div ID="app"> <input type="button" name="" @click=‘change‘ value="按钮"> <Transition name="move" mode="out-in"> <div v-if=‘flag‘ :key=1>显示</div> <div v-else :key=2>隐藏</div> </Transition> </div>
<script> var vm = new Vue({ el: ‘#app‘, data: { flag: true }, methods: { change() { this.flag = !this.flag } }
}); </script>
</body>
</HTML> 总结
以上是内存溢出为你收集整理的transition 两个便签切换，同时在动解决 <transition name="move" mode="out-in" appear> appear属性页面加载动画就开始全部内容，希望文章能够帮你解决transition 两个便签切换，同时在动解决 <transition name="move" mode="out-in" appear> appear属性页面加载动画就开始所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）