欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Vue.js之css实现过度动画

程序员文章站 2023-12-26 11:44:39
...
这次给大家带来Vue.js之css实现过度动画,Vue.js的css实现过度动画注意事项有哪些,下面就是实战案例,一起来看一下。

transition 动画

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

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

动态组件

<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 './components/a.vue'
  import comB from './components/b.vue'
  export default {    components: {comA, comB},
    data () {      return {        componentView: 'com-a'
      }
    },    methods: {
      onToggle () {        if (this.componentView === 'com-a') {          this.componentView = 'com-b'
        } else {          this.componentView = 'com-a'
        }
      }
    }
  }</script><style>
 .fade-enter-active, .fade-leave-active {   transition: all 2s ease-out;
 }  .fade-enter, .fade-leave-to {    opacity: 0;
  }</style>

动态组件,mode为默认

同时生效的进入和离开的过渡不能满足所有要求,所以 Vue 提供了 过渡模式
in-out: 新元素先进行过渡,完成之后当前元素过渡离开。
out-in: 当前元素先进行过渡,完成之后新元素过渡进入。
默认情况下是in-out

上述动画,如果设置mode="out-in"

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

注意:如果两个标签名相同,是不会执行动画的,若想执行动画,需要给标签设置不同的key来加以区分

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

两个标签名相同的动画,未设置不同的key

如果设置了不同的key,就可以执行动画了

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

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

Vue.js的计算属性和数据监听

Vue.js的事件绑定 - 内置事件绑定、自定义事件绑定

以上就是Vue.js之css实现过度动画的详细内容,更多请关注其它相关文章!

上一篇:

下一篇: