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>

js transition animation

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

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

   .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:

## 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!