Vue 项目使用 css3 动画无效 (不去掉 scoped 的简单解决方法)
今天想玩玩 css3 动画的时候,在 vue 项目里面写了半天css3,结果都没效果,我还在想,是我老了吗,提不动刀了???!!(一开始还以为是浏览器兼容的问题,加了兼容的代码,换了好几个浏览器都不行。。。别问,问就是我蠢发555~~~)然后我不信邪的单独建一个 html 页面,将一模一样的csscopy 过去,结果明明就可以运行嘛!!!然后百度了好久,就只百度到 好像跟 scoped 有关 ,
·
今天想玩玩 css3 动画的时候,在 vue 项目里面写了半天css3,结果都没效果,我还在想,是我老了吗,提不动刀了???!!(一开始还以为是浏览器兼容的问题,加了兼容的代码,换了好几个浏览器都不行。。。别问,问就是我蠢发555~~~)
然后我不信邪的单独建一个 html 页面,将一模一样的css copy 过去,结果明明就可以运行嘛!!!
然后百度了好久,就只百度到 好像跟 scoped 有关 , 加了scoped 就不生效 ( 原因我也不知道昂。。。),一开始我的代码如下,运行无效
<template>
<div class="home">
<div class="box1 "></div>
</div>
</template>
<script>
export default {
name: "Home",
};
</script>
<style lang="scss" scoped>
.box1 {
width: 200px;
height: 200px;
background: pink;
animation: drive 5s linear 2s infinite alternate;
}
@keyframes drive {
from {
transform: translateX(0);
}
to {
transform: translateX(700px);
}
}
// 兼容 chrome 和 Safari
@-webkit-keyframes drive {
from {
transform: translateX(0);
}
to {
transform: translateX(700px);
}
}
</style>
然而但是 我不想去掉 scoped,没错就是这么任性,然后我就想到了一个很”实在” 的方法哈哈哈,就是 将 css3 的动画效果,打包放进另一个 css 文件里面,然后 在当前的 vue 文件里面引用进来使用,这样还提高了代码的可复用性,我是不是很机智哈哈哈,完美
animation.css 内容如下
@keyframes drive {
from {
transform: translateX(0);
}
to {
transform: translateX(700px);
}
}
@-webkit-keyframes drive {
from {
transform: translateX(0);
}
to {
transform: translateX(700px);
}
}
然后 在我的 vue 文件里面,引用
<template>
<div class="home">
<div class="box1 "></div>
</div>
</template>
<script>
export default {
name: "Home",
};
</script>
<style lang="scss" scoped>
@import '../assets/css/animation.css'; // 这里注意不要省略后面的分号
.box1 {
width: 200px;
height: 200px;
background: pink;
animation: drive 5s linear 2s infinite alternate;
}
</style>
你看你看!! 它动了!!动了!!!啊啊啊!!!
更多推荐
已为社区贡献1条内容
所有评论(0)