vue-04-vue动画

vue动画

使用过渡类名实现动画

v-enter
v-enter-active
v-enter-to
v-leave
v-leave-active
v-leave-to

设置动画

<style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px)
    }
    .v-enter-active,
    .v-leave-active {
      transition: all 0.8s ease
    }
	
	//自定义v-前缀
	.my-enter,
    .my-leave-to {
      opacity: 0;
      transform: translateX(500px)
    }
    .my-enter-active,
    .my-leave-active {
      transition: all 1s ease
    }
  </style>

使用官方提供的标签transition把需要被动画控制的元素包裹起来

<div id="app">
    <input type="button" value="change" @click="flag=!flag">
    <transition>
      <h3 v-if="flag">helloworld</h3>
    </transition>
    <transition name="my">
        <!-- 加个name来定义自己的动画 -->
      <h3 v-if="flag">helloworld</h3>
    </transition>
  </div>

使用钩子函数实现动画

v-on:before-enter=”beforeEnter”
v-on:enter=”enter”

v-on:after-enter=”afterEnter”

beforeEnter(el) {
          el.style.transform = "translate(0, 0)"
        },
        enter(el, done) {
          el.offsetWidth //这句话没实际作用，可以认为强制动画刷新
          el.style.transform = "translate(150px, 450px)"
          el.style.transition = 'all 1s ease'
          done() //done其实是afterEnter的引用，动画完成后立即执行afterEnter
        },
        afterEnter(el) {
          this.flag = !this.flag
        }

列表的排列过渡用
- 给transition-group添加appear属性，实现一个入场效果
- 设置tag=”ul”指定transition-group渲染成ul，否则默认渲染成span

# vuejs, 基础知识

微信

vue-04-vue动画

vue动画

使用过渡类名实现动画

设置动画

使用钩子函数实现动画

喜欢这篇文章？打赏一下作者吧

评论

链接

分类

标签云

最新文章

归档

标签

最新文章

归档

标签

Your browser is out-of-date!