vue实现点击箭头的旋转动画(收起展开)效果
实现方法:用vue动态绑定class的方法,实现用不同的class渲染箭头,达到点击箭头
·
实现方法:用vue动态绑定class的方法,实现用不同的class渲染箭头,达到点击箭头的旋转效果
模板的内容:
//这里是箭头图片
<img :class="{ 'arrowTransform': !flag, 'arrowTransformReturn': flag}" src="arrow.png" alt="" @click="flag = !flag">
//或者:加一个点击事件就好了(下面这个是箭头图标)
<i :class="{ arrowRight: !flag3, arrowDown: flag3 }"class="el-icon-arrow-right downward"></i>
data的定义:
data(){
return {
flag : false,
}
}
style的内容:
.arrowTransform{
transition: 0.2s;
transform-origin: center;
transform: rotateZ(180deg);
}
.arrowTransformReturn{
transition: 0.2s;
transform-origin: center;
transform: rotateZ(0deg);
}
更多推荐
已为社区贡献15条内容
所有评论(0)