Vue.js to js implementation transition

This time I will bring you the transition from Vue.js to js. What are the things to note when using Vue.js to implement the transition? The following is a practical case, let’s take a look.

<template>
  <div>
    <button>Toggle</button>
    <div>
      <transition>
        <p>i am show</p>
      </transition>
    </div>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  import comB from &#39;./components/b.vue&#39;
  export default {    components: {comA, comB},
    data () {      
return
 {        show: true
      }
    },    methods: {//      
动画
执行的起始位置
      beforeEnter: function (el) {
        $(el).css({          left: &#39;50px&#39;,          opacity: 0
        })
      },      enter: function (el, done) {
        $(el).animate({          left: &#39;200px&#39;,          opacity: 1
        }, {          duration: 1500,          complete: done
        })
      },      leave: function (el, done) {
        $(el).animate({          left: &#39;500px&#39;,          opacity: 0
        }, {          duration: 1500,          complete: done
        })
      }
    }
  }</script><style>.animate-p {  
position
: absolute;  top: 100px;  left: 0;
}</style>

When the label is hidden, the leave animation is executed;

When the label is displayed, the beforeEnter, enter animation is executed

js transition animation

When I was learning the Ele.me takeaway app, I found that writing like this can also be done,

Add transition to the label to be animated

<div v-show="detailShow" class="detail" transition="fade">

In the CSS code

   .detail
      ......
      &.fade-transition
        opacity: 1        background: rgba(7, 17, 27, 0.8)
      &.fade-enter,&.fade-leave
        opacity: 0        background: rgba(7, 17, 27, 0)

In this way, you can simply implement an animation with excessive background transparency

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Computed properties and data monitoring of Vue.js

Event binding of Vue.js- Built-in event binding, custom event binding

## Synchronous update method of list data in Vue.js

Vue.js list rendering v-for array object subcomponent

The above is the detailed content of Vue.js to js implementation transition. For more information, please follow other related articles on the PHP Chinese website!