css鼠标移入移出动画

• html部分

<div class="ad">
      <img class="ad-img" v-bind:class="move?'ad-img-movein':'ad-img-moveout'" @mouseenter="enter()" @mouseleave="leave()" src="../../static/imgs/left_adv.png" />
    </div>

• js部分

data() {
    return {
      move:false,
    }
  },
  
   methods: {
   enter(){
        this.move = true
      },
      leave(){
        this.move = false
      }
      }

• css部分

    .ad{
  position: absolute;
  top: 50%;
  right: 0px;
  margin-top: -70px;
  width: 140px;
  overflow: hidden;
}
.ad-img{
  position:relative;
  width: 140px;
  right: -89px;
  //animation:show-img 5s infinite;
}
.ad-img-movein{
  right: 0px;
  transition:right 1s;
  -moz-transition:right 1s; /* Firefox 4 */
  -webkit-transition:right 1s; /* Safari and Chrome */
  -o-transition:right 1s;
}
.ad-img-moveout{
  right: -89px;
  transition:right 1s;
  -moz-transition:right 1s; /* Firefox 4 */
  -webkit-transition:right 1s; /* Safari and Chrome */
  -o-transition:right 1s;
}