欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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,否则没有高度不旋转vue2实现过渡动画,transition的简单使用

相关标签: vue2