过渡动画和animate.css同时使用的时候，过渡没有生效-慕课网

<script> const app = new Vue({ el: '#app', data: { message: '詹姆斯牛逼', isShow: true, }, methods: { handleBtnClick() { this.isShow = !this.isShow; } } }) </script>

3回答

提问者 Kelinlawu 2021-01-09 11:39:54

这是关于第二个favicon问题的截图

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

收起回答

提问者 Kelinlawu 2021-01-09 11:36:16

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用animated库</title>
    <script src="./vue.js"></script>
    <!-- 解决Vue提醒是否为生产版本的提示 -->
    <script>Vue.config.productionTip = false</script>
    <link rel="stylesheet" type="text/css" href="./animate.css">
    <style>
        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 2s;
        }
    </style>
</head>

<body>
    <div id="app">
        <transition type="animation" name="fade"
            enter-active-class="animate__animated animate__bounceInDown fade-enter-active"
            leave-active-class="animate__animated animate__bounceOut fade-leave-active" appear
            appear-active-class="animate__animated animate__bounceInDown">
            <div v-if="isShow">{{message}}</div>
        </transition>
        <button v-on:click="handleBtnClick">切换</button>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '詹姆斯牛逼',
                isShow: true,
            },
            methods: {
                handleBtnClick() {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

</html>

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

收起回答

Dell 2021-01-09 11:10:09

nice

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

收起回答

提问者 Kelinlawu #1

老师，nice是什么意思呀。可以看看问题出在哪里吗？按照您视频中的做法，会出现过渡和动画不能同时使用的问题

回复有任何疑惑可以回复我~ 2021-01-09 11:14:38

Dell 回复提问者 Kelinlawu #2

看这个代码，看不出你动画的问题，你需要把你的上面的模版和样式发给我

回复有任何疑惑可以回复我~ 2021-01-09 11:33:08

提问者 Kelinlawu #3
```
我知道了，马上发给你
```
回复有任何疑惑可以回复我~ 2021-01-09 11:33:43

点开查看后面4条评论

过渡动画和animate.css同时使用的时候，过渡没有生效

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

3回答

相似问题

请选择置顶位置

本课精华内容

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

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

首页swiper的轮播失效

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

swiper找不到module

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

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

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

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

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

热搜

最近搜索清空

过渡动画和animate.css同时使用的时候，过渡没有生效

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

3回答

相似问题

请选择置顶位置

本课精华内容

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

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

首页swiper的轮播失效

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

swiper找不到module

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

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

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

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

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

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

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