Vue.js's css implements excessive animation-JS Tutorial-php.cn

Vue.js's css implements excessive animation

php中世界最好的语言

Release： 2018-03-13 14:24:07

Original

1579 people have browsed it

This time I will bring you the over-implementation of css in Vue.jsanimation, the over-animation of css in Vue.jsWhat are the precautions, the following is a practical case, let's come together take a look.

transition animation

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

Copy after login

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>

Copy after login

css-transform animation

Dynamic component

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

Copy after login

Dynamic component, mode is the default

The entry and exit transitions that take effect at the same time cannot meet all requirements, so Vue provides a transition mode
in-out: New elements transition first, and then the current element transitions leave.
out-in: The current element transitions first, and then the new element transitions in.
The default is in-out

The above animation, if set mode="out-in"

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

Copy after login

Note: If the two tag names are the same, the animation will not be executed , if you want to execute animation, you need to set different keys for the tags to distinguish them

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

Copy after login

Two animations with the same tag name have not set different keys

If different keys are set, then Animation can be executed

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

Copy after login

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!