vue中组件的过渡动画及实现代码

网络编程 2021-07-04 16:47www.168986.cn编程入门

这篇文章主要介绍了vue中组件的过渡动画，并通过实例代码给大家介绍了过渡动画的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

1. 和多个元素的过渡一样，用组件来替换transition中包裹的标签

<style>
 .fade-enter,
 .fade-leave-to {
  opacity: 0
 }
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity 2s
 }
 </style>
</head>

<body>
 <div id="demo">
 <button @click="show = !show">click me</button>
 <transition name="fade" mode="in-out">
  <child-one v-if="show"></child-one>
  <child-two v-else></child-two>
 </transition>
 </div>
 <script>
 Vue.ponent('child-one', {
  template: `<div>child-one</div>`
 })
 Vue.ponent('child-two', {
  template: `<div>child-two</div>`
 })
 new Vue({
  el: '#demo',
  data: {
  show: true
  },
 })
 </script>

2. 动态组件ponent组件 :is 属性，来实现组件的过渡效果

<style>
 .fade-enter,
 .fade-leave-to {
  opacity: 0
 }
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity 2s
 }
 </style>
</head>

<body>
 <div id="demo">
 <button @click="handleClick">click me</button>
 <transition name="fade" mode="in-out">
  <ponent :is="type"></ponent>
 </transition>
 </div>
 <script>
 Vue.ponent('child-one', {
  template: `<div>child-one</div>`
 })
 Vue.ponent('child-two', {
  template: `<div>child-two</div>`
 })
 new Vue({
  el: '#demo',
  data: {
  type: 'child-one'
  },
  methods:{
  handleClick () {
   this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
  }
  }
 })
 </script>

PS狼蚁网站SEO优化看下Vue过渡动画实现

实现一个点击切换元素的隐藏和显示状态!

<div id="app">
  <transition>
    <p v-if="show">Hello World</p>
  </transition>
  <button @click="toggle">切换</button>
</div>

需要把加入动画的元素放在transition组件内,定义一个按钮的切换方法

<script>
  var app=new Vue({
    el:"#app",
    data:{
      show:true
    },
    methods:{
      toggle:function(){
        this.show=!this.show;
      }
    }

  })
</script>

给不同状态下添加相应的样式

.v-enter,.v-leave-to{
  opacity:0;
}
.v-enter-active,.v-leave-to{
  color:#00BFFF;
  transition: opacity 3s;
}

可以给transition添加一个name,如果name为"fade",则class前缀为指定的name

动画过程中类名的变化

我们可以自定义类名,在元素属性中添加进入状态 enter-active-class,和离开状态leave-active-class

以上所述是长沙网络推广给大家介绍的vue中组件的过渡动画及实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！

上一篇：apicloud拉起小程序并传递参数的方法示例下一篇：详解promise.then,process.nextTick, setTimeout 以及 setImm

vue中组件的过渡动画及实现代码

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

vue中组件的过渡动画及实现代码

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设