Vue中动态修改keyframes动画特效
使用一个简单的投票系统来做演示。操作主要使用的是document.styleSheets[0]通过插入规则 insertRule 来添加动画最后通过style进行样式修改代码下面是演示代码:<template><div><div class="toupiao" v-if="showTest"><div class="yes btns" @click="ch
·
使用一个简单的投票系统来做演示。
操作
主要使用的是document.styleSheets[0]
通过插入规则 insertRule 来添加动画
最后通过style进行样式修改
代码
下面是演示代码:
<template>
<div>
<div class="toupiao" v-if="showTest">
<div class="yes btns" @click="changes('1')">赞同</div>
<div class="no btns" @click="changes('0')">不赞同</div>
</div>
<div class="showToupiaoMsg" v-show="!showTest">
<div class="yes btns" ref="yes">
<div>
<span v-show="touVal == '1'">您选择了:</span>
赞同
</div>
<div>
{{ yesPeople }}
</div>
</div>
<div class="no btns" ref="no">
<div><span v-show="touVal == '0'">您选择了:</span>不赞同</div>
<div>
{{ noPeople }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
yesPeople: 6781, //同意人数
noPeople: 3361, //不同意人数
showTest: true, //显示
touVal: "" //选择的选项
}
},
methods: {
// 显示投票数据
changes(val) {
this.showTest = false
this.touVal = val
}
},
mounted() {
// 百分比
var isTrue = (this.yesPeople / (this.yesPeople + this.noPeople)) * 100
var isFalse = (this.noPeople / (this.yesPeople + this.noPeople)) * 100
// 规则
var ruleTrue = ` @keyframes changeWidth3 {
to {
background-size: ${isTrue}% 100%;
}
}`
var rulesFalse = `
@keyframes changeWidth4 {
to {
background-size: ${isFalse}% 100%;
}
}`
// 获取规则并进行改变
var sheet = document.styleSheets[0]
sheet.insertRule(ruleTrue, 0)
sheet.insertRule(rulesFalse, 0)
this.$refs.yes.style.animation = "changeWidth3 1s forwards"
this.$refs.no.style.animation = "changeWidth4 1s forwards"
}
}
</script>
<style lang="less" scoped>
.toupiao {
width: 100vw;
height: 100px;
overflow: hidden;
background: pink;
.btns {
width: 94%;
height: 2rem;
margin: 10px;
border: 1px solid #fff;
border-radius: 5px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.btns:active {
background: orangered;
border: 1px solid orangered;
opacity: 0.6;
}
}
.showToupiaoMsg {
width: 100vw;
height: 120px;
overflow: hidden;
background: pink;
margin-top: 1px;
.btns {
width: 92%;
height: 2rem;
margin: 10px;
border: 1px solid #fff;
border-radius: 5px;
color: #fff;
display: flex;
justify-content: space-between;
padding: 0.2rem;
align-items: center;
}
.yes {
background-image: linear-gradient(#73ffa0, #73ffa0);
background-repeat: no-repeat;
background-size: 0 100%;
background-position: 0 70%;
animation: changeWidth 1s forwards;
}
.no {
background-image: linear-gradient(#ccc, #ccc);
background-repeat: no-repeat;
background-size: 0 100%;
background-position: 0 70%;
animation: changeWidth2 1s forwards;
}
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)