VUE中使用animate.css显示不出动画效果*

最新推荐文章于 2024-04-24 14:58:05 发布

小鸽子。

最新推荐文章于 2024-04-24 14:58:05 发布

阅读量1.4k

点赞数

文章标签： vue.js css

本文链接：https://blog.csdn.net/qq_44258878/article/details/113728833

版权

为什么VUE中使用animate.css显示不出动画效果

***问题：在官网下载了animate.css并引入，运行之后，发现并没有显示应有的效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用 animate.css库</title>
    <script src="./vue.js"></script>
  <link   rel="stylesheet"  href="./animate.css" />
</head>
<body>

        <div id="root">
        <transition name="fade" 
        enter-active-class="animated swing"
         leave-active-class="animated shake">
                 <div  v-show="show">hello world</div>
       </transition>
        <button  @click="handleClick">切换</button>
    </div>

    <script >
        var vm=new Vue({
            el: '#root',
            data:{
                show: true
            },
            methods:{
                handleClick:function(){
                    this.show= ! this.show
                }
            }
        })
    </script>
</body>
</html>

解决方法：
经过一下午的度娘挣扎，思考了浏览器的问题，代码的问题亦或是animate.css的版本问题，最后发现是电脑自身的问题。
调整之前：性能选项—调整为最佳性能
调整之后：性能选项—自定义—“窗口内的动画控件和元素”
在这里插入图片描述

调整前的系统性能：

在这里插入图片描述
**

调整后的系统性能：

** 在这里插入图片描述
再运行一下！动画效果就出来啦！

小鸽子。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE中使用animate.css显示不出动画效果*

为什么VUE中使用animate.css显示不出动画效果***问题：在官网下载了animate.css并引入，运行之后，发现并没有显示应有的效果。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>使用 animate.css库</title> <script src="./vue.js"></script> &l
复制链接

扫一扫