집 >웹 프론트엔드 >JS 튜토리얼 >Vue.js에서 js 구현으로 전환

Vue.js에서 js 구현으로 전환

php中世界最好的语言원래의: 2018-03-13 14:26:031215검색

이번에는 Vue.js에서 js로의 전환에 대해 알려드리겠습니다. Vue.js의 js를 사용하여 전환을 구현할 때의 주의사항은 무엇인가요?

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

라벨이 숨겨지면 떠나기 애니메이션이 실행되고
라벨이 표시되면 beforeEnter 및 Enter 애니메이션이 실행됩니다.

js 전환 애니메이션

Vue.js에서 js 구현으로 전환

Ele.me 테이크아웃 앱을 배울 때,
애니메이션을 적용할 태그에 전환을 추가하세요

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

CSS 코드에서

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

이렇게 하면 배경 투명도가 과도한 애니메이션을 간단하게 구현할 수 있습니다

읽고 나면 방법을 익히셨을 거라 믿습니다. 이 기사의 사례 외 PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!