2回答

fishenal

2017-04-03

1. 这是个好问题，我没仔细思考过，实际看下来，在mounted阶段修改属性并没有运行transition动画，可能transition是在mounted之后运行的。
   

2. transition的触发是需要显示状态更改，用setTimeout是比较tricky的做法，不去切换isShow，transition不会主动执行。

3. 改变nowIndex，旧的src那张图是在出动画阶段，新的在进动画阶段，我理解前一个动画应该是把状态利用 css动画机制把图片缓存起来了，出去的过程只是执行出动画，并不收状态更改的影响，新图的进动画，是在src更改以后执行的动画，旧的出动画是在状态更改之前进行的。 你就单纯的理解是两种动画状态。
   

0

0

鸡肋2016

2017-05-06

1，对于老师的回答，created阶段  js属性像数据(data、computed等)、方法(methods)等都已经绑定好，dom未生成，$el未挂钩，此时isShow为data中的true。到了mounted阶段dom生成好,$el挂钩，之后再点击执行goto()函数，此时已经进行监控数据变化来更新dom，goto()也是在mounted之后执行的，老师的回答我不太明白。

我的回答：

其实goto()第一次执行时，执行了动画。老师的动画写法是把两张图分new,old两个transition来写的，第一个transition的css只写了进入动画，第二个只写了出去动画，而图片的显示和隐藏一定涉及到进入和出去，我们初始化为true，并把goto()函数写成this.isShow = !this.isShow，this.nowIndex = index，会发现1-2、3-4没有动画，2-3，4-1有动画，就是因为它两个都只写了一个动画。

要解决这个问题有两种方法，一个是老师的方法，先初始化true，goto()里再设置false，这一步其实有执行，我们一开始进来显示的确实是new里img，执行goto()后new里img隐藏，old里img显示，这时候未执行this.nowIndex ＝index，图片还是第一张图片，图片切换我们看不出来的，之后执行setTimeout里函数，又变为true且图片也更新，new里img由false-true，执行进动画，old里img由true-false，执行出动画(出动画有缓存图片未变)，这样能做到new里img每次都只执行进动画，old里img每次只执行出动画。

另一个方法是，goto()函数写成this.isShow = !this.isShow，this.nowIndex = index。css把new的出动画和old的进动画也写上就ok了。

2、老师的回答的偏了，transition的触发不需要setTimeout，mounted阶段后会进入数据监听，数据改变实时更新dom。至于老师说的tricky可以看看这篇https://www.zhihu.com/question/50879936   10毫秒的定时函数的目的就是为了 为了给第一步false留出时间，然后就可以执行动画了。

3、我同意老师的回答，出动画会有缓存，仍是原来图片，进动画会更新图片。

4

1

fishenal

幻灯片这里我也是在准备课程的时候自己创造的，没有参考现有的东西。slide的实现可以去看看现成的库，应该有更好的思路，谢谢你的分享，知乎的链接是404

2017-05-07

共1条回复