5-4小节中，用了Velocity后，第二次再点击按钮，hello world回不来是怎么回事呀

来源：5-4 Vue中的 Js 动画与 Velocity.js 的结合

Aaron叶

2018-10-30

写回答

3回答

慕先生3442787

2018-11-26

控制显示隐藏的方法是“v-show”，‘v-show’隐藏的原理是将样式diaplay设置为none，此时元素的opacity还是1，所以写一个leave把opacity设为0可解决。或者使用‘v-if’，v-if每次切换都会重新渲染。

慕前端6263329

所以写一个leave把opacity设为0可解决,你能把你说的解决方式用代码实现一下吗？我试了你说的方法，没有任何意义。除非执行enter的逆过程。主要想理解原理~麻烦大佬告知一二...

2019-01-21

共1条回复

weixin_慕UI5568240

2019-09-18

这样解释不太对呀，opacity即使是1，在下次的before-enter中还是会把opacity改为0的呀。所以应该不是这个的问题

Aaron叶

提问者

2018-10-30

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="vue.j
s"></script>    <script src="Velocity.js"></script></head><body>    <div id="app">        <transition @before-enter="handBeforeEnter" @enter="handEnter" @after-enter="handAfterEnter" @before-leave="handBeforeLeave" @leave="handLeave" @after-leave="handAfterLeave">            <div v-show="show">hello world</div>        </transition>        <button @click="handldClick">点击</button>    </div>    <script> var vm = new Vue({            el : '#app', data : {                show: true }, methods : {                handldClick : function () {                    this.show = !this.show }, handBeforeEnter : function (el) {                    el.style.opacity = 0 }, handEnter : function (el, done) {                    Velocity(el, {                            opacity : 1 }, {                            duration :1000, complete:done                        })                }, handAfterEnter : function (el) {                    console.log('动画结束')                }            }        })    </script></body></html>

这是我写的代码

慕前端6263329

你解决了么？

2019-01-21

共1条回复

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代，企业主流版本Vue2+Vue3全掌握

10675 学习 · 8191 问题

查看课程

相似问题

为什么使用 velocity 之后第二次点击 toggle 就无法显示 hello world 呢？

回答 4