Vue.js之js实现过渡

来源：动视网责编：小采时间：2020-11-27 20:01:12

Vue.js之js实现过渡

Vue.js之js实现过渡:这次给大家带来Vue.js之js实现过渡，使用Vue.js的js实现过渡的注意事项有哪些，下面就是实战案例，一起来看一下。<template> <div> <button @click="show = !show">Toggle</button>

推荐度：

点击下载本文 文档为doc格式

导读Vue.js之js实现过渡:这次给大家带来Vue.js之js实现过渡，使用Vue.js的js实现过渡的注意事项有哪些，下面就是实战案例，一起来看一下。<template> <div> <button @click="show = !show">Toggle</button>

这次给大家带来Vue.js之js实现过渡，使用Vue.js的js实现过渡的注意事项有哪些，下面就是实战案例，一起来看一下。

<template>
 <div>
 <button @click="show = !show">Toggle</button>
 <div class="ab">
 <transition
 @before-enter="beforeEnter"
 @enter="enter"
 @leave="leave"
 :css="false"
 >
 <p class="animate-p" v-show="show">i am show</p>
 </transition>
 </div>
 </div></template><script>
 import comA from './components/a.vue'
 import comB from './components/b.vue'
 export default { components: {comA, comB},
 data () { 
return
 { show: true
 }
 }, methods: {// 
动画
执行的起始位置
 beforeEnter: function (el) {
 $(el).css({ left: '50px', opacity: 0
 })
 }, enter: function (el, done) {
 $(el).animate({ left: '200px', opacity: 1
 }, { duration: 1500, complete: done
 })
 }, leave: function (el, done) {
 $(el).animate({ left: '500px', opacity: 0
 }, { duration: 1500, complete: done
 })
 }
 }
 }</script><style>.animate-p { 
position
: absolute; top: 100px; left: 0;
}</style>

当让标签隐藏时,执行的是leave动画;
当让标签显示时,执行的是beforeEnter,enter动画

js过渡动画

在学习饿了么外卖app时,发现这样写也可以,
给要执行动画的标签添加transition

<div v-show="detailShow" class="detail" transition="fade">

在CSS代码中

 .detail
 ......
 &.fade-transition
 opacity: 1 background: rgba(7, 17, 27, 0.8)
 &.fade-enter,&.fade-leave
 opacity: 0 background: rgba(7, 17, 27, 0)

这样就可以简单的实现一个背景透明度过度的动画

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

Vue.js之js实现过渡

推荐度：

点击下载本文 文档为doc格式

标签： VUE 实现 js

热门焦点

Vue.js之js实现过渡

Vue.js之js实现过渡

Vue.js之js实现过渡

最新推荐

猜你喜欢

热门推荐