집 >웹 프론트엔드 >JS 튜토리얼 >Vue.js의 CSS가 과도한 애니메이션을 구현합니다.

Vue.js의 CSS가 과도한 애니메이션을 구현합니다.

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

이번에는 Vue.js의 CSS 오버 애니메이션 애니메이션을 가져오겠습니다. Vue.js의 CSS 오버 애니메이션의 주의사항은 무엇인가요?

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div class="ab">
      <transition name="adc">
        <p v-show="show">I am show</p>
      </transition>
    </div>
  </div></template><script>
  export default {
    data () {      return {        show: true
      }
    }
  }</script><style>
 .adc-enter-active, .adc-leave-active {   transition: all 2s ease-out;
 }  .adc-enter, .adc-leave-to {    opacity: 0;
  }</style>

css-transform animation

<template>  <div>    <button @click="show = !show">Toggle</button>    <div class="ab">      <transition name="my-trans">        <p v-show="show">I am show</p>      </transition>    </div>  </div></template><script>  export default {    data () {      return {        show: true      }    }  }</script><style>  .my-trans-enter-active, .my-trans-leave-active {    transition: all .5s ease-out;  }  .my-trans-enter {    transform: translateY(-100px);    opacity: 0;  }  .my-trans-leave-active {    transform: translateY(100px);  }</style>

css-transform animation

동적 구성요소

<template>
  <div>
    <button @click="onToggle">Toggle</button>
    <div class="ab">
      <transition name="fade">
        //动态组件        <div :is="componentView"></div>
      </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 {        componentView: &#39;com-a&#39;
      }
    },    methods: {
      onToggle () {        if (this.componentView === &#39;com-a&#39;) {          this.componentView = &#39;com-b&#39;
        } else {          this.componentView = &#39;com-a&#39;
        }
      }
    }
  }</script><style>
 .fade-enter-active, .fade-leave-active {   transition: all 2s ease-out;
 }  .fade-enter, .fade-leave-to {    opacity: 0;
  }</style>

동적 구성요소, 모드가 기본값

동시에 적용되는 전환 시작 및 종료는 모두 충족할 수 없습니다. 요구 사항에 따라 Vue는 전환 모드
in-out을 제공합니다. 새 요소가 먼저 전환되고 완료 후에 현재 요소가 전환됩니다.
out-in: 현재 요소가 먼저 전환되고 완료 후에 새 요소가 전환됩니다.
기본값은 in-out

위 애니메이션에서 mode="out-in"으로 설정된 경우

<transition name="fade" mode="out-in">   <div :is="componentView"></div></transition>
mode="out-in"

참고: 두 태그 이름이 동일할 경우 애니메이션을 실행하려는 경우 애니메이션이 실행되지 않습니다. , 태그를 설정해야 합니다. 서로 다른 키를 사용하여 구별합니다

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div class="ab">
      <transition name="fade" mode="out-in">
        <p v-if="show" >i am show</p>
        <p v-else >not in show</p>
      </transition>
    </div>
  </div></template>

동일한 태그 이름을 가진 두 애니메이션이 서로 다른 키를 설정하지 않았습니다

다른 키를 설정하면 애니메이션이 실행될 수 있습니다

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div class="ab">
      <transition name="fade" mode="out-in">
        //设置不同的key        <p v-if="show" key="1">i am show</p>
        <p v-else key="2">not in show</p>
      </transition>
    </div>
  </div></template>

마스터하셨을 거라 믿습니다 이 기사의 사례를 읽은 후 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!