关于同时使用-慕课网

于曼丽 2018-07-18 15:07:41

因为你的代码里面 appear-active-class="animated swing" 这里只是为开始动画应用了 keyframe 形式的动画，没有使用 transition。换句话说，也可以理解为你的开始动画指定了一个 transition: all 0s 的样式。那么你的开始动画的执行时间点是这样的：keyframe 动画和 transition 效果同时开始，但是 transition 持续时间为 0s 然后触发 transition-end 事件，keyframe 动画持续时间为 1s (animate.css 源码里面指定的为 1s) 然后触发 animation-end 事件。你设置 type="transition"，所以 vue 框架监听到 transition-end 事件之后，便会清除掉 .fade-enter-active .fade-enter-to .appear-enter-active 这些类，所以动画就停止了。由于transition 只持续了 0s，其实就相当于你设置了 :duration="0"，动画持续 0s 就结束，因此还没来得及执行 keyframe 动画，你的动画就已经停止了。如果你设置 type="animation"，那么 vue 框架会侦听 animation-end 事件来决定何时结束动画，由于 keyframe 动画持续时间为 1s，就相当于设置了 :duration="1000"，这样就会执行你的 keyframe 动画了。

你可以试一下，你的源码不要动，只是修改 appear-active-class="animated swing .fade-enter-active"，这样就相当于为你的开始动画效果添加了一个持续时间为 3s 的transition，transition-end 事件的触发就不会是原来的 0s 了，而是 3s 之后触发，type="transition" 就相当于 :duration="3000"，就可以执行你的 keyframe 动画了

0 回复有任何疑惑可以回复我~

收起回答

提问者 chriose 2018-05-25 10:31:54

老师这是你写的代码，在这个时间点，你刷新页面后。appear的开始动画没有了。当你写了type=transition时

0 回复有任何疑惑可以回复我~

收起回答

Dell 2018-05-24 11:52:40

代码发上来看看

0 回复有任何疑惑可以回复我~

收起回答

提问者 chriose #1

<style>
        * {
            margin: 0;
            padding: 0;
            font-family: Microsoft YaHei, serif;
        }

        li {
            list-style: none;
        }
        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 4s;
        }
    </style>
    <link rel="stylesheet" href="./Animate.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <transition name= "fade"
                appear
                :duration= "4000"
                enter-active-class= "animated swing fade-enter-active"
                leave-active-class= "animated swing fade-leave-active"
                appear-active-class= "animated swing"
    >
        <div v-show="show">hello world</div>
    </transition>
    <button @click= "change">Toggle</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            change(){
                this.show = !this.show
            }
        }
    })
</script>

回复有任何疑惑可以回复我~ 2018-05-24 11:54:11

提问者 chriose #2

太长，只能发这么多。另外还有一个v-model的问题，还请老师帮忙讲一下。就是说下老师对v-model的理解还有实现。

回复有任何疑惑可以回复我~ 2018-05-24 11:55:10

Dell 回复提问者 chriose #3
```
你截个图吧，这样我没法看哇
```
回复有任何疑惑可以回复我~ 2018-05-24 19:16:08

点开查看后面2条评论

关于同时使用

正在回答回答被采纳积分+3

3回答

相似问题

请选择置顶位置

本课精华内容

今天新建了一个分支，git pull时发现报错

我的也是，进入的动画没有效果

首页swiper的轮播失效

6-3 按老师的操作改了路由但是显示主页的仍然是去哪儿网的页面

swiper找不到module

【讨论题】Composition API 应用时注意得问题

【讨论题】Composition API 产生背景及解决问题

【讨论题】作为前端，你在开发中是如何进行代码调试 Debug

【讨论题】移动端项目的开发过程中，你遇到过怎样的兼容性问题？

【讨论题】对前端数据管理框架，你有怎样的理解？

热搜

最近搜索清空

关于同时使用

正在回答 回答被采纳积分+3

3回答

相似问题

请选择置顶位置

本课精华内容

今天新建了一个分支，git pull时发现报错

我的也是，进入的动画没有效果

首页swiper的轮播失效

6-3 按老师的操作改了路由 但是显示主页的仍然是去哪儿网的页面

swiper找不到module

【讨论题】Composition API 应用时注意得问题

【讨论题】Composition API 产生背景及解决问题

【讨论题】作为前端，你在开发中是如何进行代码调试 Debug

【讨论题】移动端项目的开发过程中，你遇到过怎样的兼容性问题？

【讨论题】对前端数据管理框架，你有怎样的理解？

正在回答回答被采纳积分+3

6-3 按老师的操作改了路由但是显示主页的仍然是去哪儿网的页面