这次给大家带来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)
这样就可以简单的实现一个背景透明度过度的动画
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上就是Vue.js之js实现过渡的详细内容,更多请关注php中文网其它相关文章!
已抢24068个
抢已抢118588个
抢已抢139719个
抢已抢6420个
抢已抢37729个
抢已抢67133个
抢