vue2.0之过渡动画，分别用钩子函数,animated,原生css实现(前端网备份)-CSDN博客

钩子函数实现过渡，要求每次点击按钮只能从右边100px往左边滑动，

.show{
  transition: all 0.4s ease
}

js
<div id="example-3">
      <button @click="show = !show">Toggle render</button>
      <transition @before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
        <p v-if="show" class="show">hello</p>
      </transition>
    </div>

export default {
  name: "HelloWorld",
  data() {
    return {
      show: false,
    };
  },
  props: {
  },
  created: function() {
  },
  methods: {
    beforeEnter(el) {
      el.style.transform = "translate(100px,0)";
      console.log(el);
    },
    enter(el, done) {
      //动画初始化
      el.offsetWidth;
      el.style.transform = "translate(0px,0)";
        //动画结束
      done();
      console.log(el);
      console.log(done);
    },
    afterEnter(el) {
      this.show = !this.show;
    },
  }
};

View Code

注意加上.show过度css属性，初始化的时候el.offsetWidth;也可以用el.clientWidth;至于为什么暂时不清楚，但是不这样的话是没有过渡效果的

结合animated实现vue过渡

<transition
        enter-active-class="animated fadeInRight "
        leave-active-class="animated bounceOutRight"
      >
        <p v-if="show">hello</p>
      </transition>

把上面的transition一替换，效果就是点击第一次是fadeInRight；点击第二次是bounceOutRight

记得引入

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

其实只需要把enter-active-class和leave-active-class写成一样的，也可以达到上面钩子函数每次点击按钮都是从右边划到左边的动画效果

<transition
        enter-active-class="animated fadeInRight "
        leave-active-class="animated fadeInRight"
      >
        <p v-if="show">hello</p>
      </transition>

css原生实现的过渡和动画

https://cn.vuejs.org/v2/guide/transitions.html#CSS-%E8%BF%87%E6%B8%A1

.show{ transition: all 0.4s ease}
js<div id="example-3"> <button @click="show = !show">Toggle render</button> <transition @before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter"> <p v-if="show" class="show">hello</p> </transition> </div>
export default { name: "HelloWorld", data() { return { show: false, }; }, props: { }, created: function() { }, methods: { beforeEnter(el) { el.style.transform = "translate(100px,0)"; console.log(el); }, enter(el, done) { //动画初始化 el.offsetWidth; el.style.transform = "translate(0px,0)"; //动画结束 done(); console.log(el); console.log(done); }, afterEnter(el) { this.show = !this.show; }, }};

转载于:https://www.cnblogs.com/lsc-boke/p/10997273.html