vue2实现过渡动画,transition的简单使用
程序员文章站
2022-05-15 18:39:00
...
水平有限,遇到的坑记录一下
transition结构如下:
<template>
<div class="cartcontrol">
<transition name="move">
<div class="cart-decrease" v-show="food.count>0">
<span class="inner icon-remove_circle_outline"></span>
</div>
</transition>
</template>
css样式如下
<style lang="stylus" rel="stylesheet/stylus">
.cartcontrol
font-size:0
text-align:center
.cart-decrease
display:inline-block
padding:6px
.inner
display:inline-block
line-height:24px
text-align:center
font-size:24px
color: rgb(0,160,220)
&.move-enter,&.move-leave-to
transform:translate3d(24px,0,0)
.inner
transform: rotate(180deg)
&.move-enter-active,&.move-leave-active
opacity:1
transition:all .5s linear
.inner
transition:all .5s linear
</style>
坑:
1,move-enter,move-leave-to:动画的开始状态和结束状态
2,move-enter-active,move-leave-active:动画的过程
3,inner:display必须设置为inline-block,否则没有高度不旋转
上一篇: 对于古代传统意义上的漆画而言,它有怎样的工艺流程?
下一篇: map遍历的四种方式
推荐阅读
-
Vue Transition实现类原生组件跳转过渡动画的示例
-
Android学习日记——使用约束布局ConstraintLayout制作一个简单的转场动画实现图片扩大效果
-
vue2实现过渡动画,transition的简单使用
-
Vue中使用transition、transition-group实现显示隐藏的过渡动画【开发记录】
-
Vue Transition实现类原生组件跳转过渡动画的示例
-
安卓最简单的动画效果实现-使用属性android:animateLayoutChanges="true"
-
使用 CSS3 动画实现的 3D 图片过渡特效_html/css_WEB-ITnose
-
如何使用css transition属性实现带动画显隐的微信小程序部件
-
如何使用css transition属性实现带动画显隐的微信小程序部件
-
使用 CSS3 动画实现的 3D 图片过渡特效_html/css_WEB-ITnose