純 css3 做對勾 vue 中使用的
阿新 • • 發佈:2018-12-12
html
<i class="icon-span" @click='data' :class="{'icon-span-select' : isShow}"></i><span :class="{'aaa' : isShow}">aaaaa</span>
css
.icon-span{ display: inline-block; background-color: #fff; border-radius: 100%; border: 1px solid #ccc; position: relative; width: 30px; height: 30px; vertical-align: middle; } .icon-span::after{ border: 2px solid transparent; border-left: 0; border-top: 0; content: " "; top: 3px; left: 8px; position: absolute; width: 10px; height: 16px; -webkit-transform: rotate(45deg) scale(0); transform: rotate(45deg) scale(0); -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; } .icon-span-select{ background-color: green; border-color: #fff; } .icon-span-select::after{ border-color: #fff; -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } .aaa { color: red; }
vue中的 js
methods: {
data () {
this.isShow = !this.isShow
}
}