vue中使用aniamte.css动画无法呈现?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用animate.css</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" >
    <style>
        p{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script src="../resource/vue/vue.min.js"></script>
</head>
<body>
    <div id="example-3">
        <button @click="show = !show">
            Toggle render
        </button>
        <transition enter-active-class="animated fadeInLeft" leave-active-class='animated fadeOutRight'>
            <p v-if="show">hello</p>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el:"#example-3",
            data:{
                show:true
            }
        });
    </script>
</body>
</html>

如上,在vue中使用animate.css时,点击按钮后没有动画效果,自己定义css样式有效果,这是怎么一回事啊?

阅读 2.1k
2 个回答

你确定你引用到了?jsbin

clipboard.png
这是访问Animate.css官网时的截图,下面是它的提示,然后我根据提示进入到MDN
它里面说要把@meida的一个叫做prefers-reduced-motion的值改为
no-preference.然后又根据找到cdn的文件,发现prefers-reduced-motion的值是reduce:
图片描述

额...这个意思就是说要改源文件了吗?:>,我保存了一下,然后到项目里面,将reduce改为
no-preference,然后....然后就动画就正常执行了。。。
但是应该不会到要修改源文件的底部啊,有大神知道这是咋回事吗?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题