学习Vue日记第五天

最新推荐文章于 2022-11-05 19:38:35 发布

c木

最新推荐文章于 2022-11-05 19:38:35 发布

阅读量65

点赞数

本文链接：https://blog.csdn.net/qq_43061473/article/details/117575358

版权

钩子函数实现动画（越来越难了@！–！@）
Vue结合Velocity.js实现动画

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="velocity.min.js"></script>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="app">
    <button @click="show=!show">动画效果</button>
    <transition @before-enter="beforeEnter" @enter="enter"
     @leave="leave" v-bind:css="false">
      <p v-if="show">文字动画效果</p>
    </transition>
  </div>  
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        show: false,
      },
      methods: {//Velocity第一个参数是DOM元素 第二个参数是CSS参数列表 第三个参数是动画配置项
        beforeEnter (el) {
          el.style.opacity = 0				      // 透明度为0
          el.style.transformOrigin = 'left'	// 设置旋转元素的基点位置
          el.style.color = 'red'			    	// 颜色为红色
        },
        enter (el, done) {			// duration动画执行时间
          Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
          Velocity(el, { fontSize: '1em' }, { complete: done })
        },
        leave (el, done) {
          Velocity(el, { translateX: '15px', rotateZ: '50deg' },
          {duration: 3000})
          Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
          Velocity(el, { rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0}, { complete: done } )
        }
      }
    })
  </script>
</body>
</html>

多个元素过渡
1、不同标签元素过渡

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="app">
    <transition>
      <ul v-if="items.length > 0">
        <li>项目1</li>
        <!-- 项目... -->
      </ul>
      <p v-else>抱歉，没有找到您查找的内容。</p>
    </transition>
  </div>  
  <script>
    var vm = new Vue({ el: '#app', data: { items: [] } })
  </script>
</body>
</html>

2、相同标签元素过渡

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="app">
    <button @click="isEditing = !isEditing">切换保存和编辑按钮</button>
    <div>
      <transition name="fade">
        <button v-if="isEditing" key="save">保存</button>
        <button v-else key="edit">编辑</button>
      </transition>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: { isEditing: true }
    })
  </script>
</body>
</html>

明天加油！！！今天做了一个模块编写学的少一些。

c木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习Vue日记第五天

钩子函数实现动画（越来越难了@！–！@）Vue结合Velocity.js实现动画<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <script src="velocity.min.js"></script> <script src="../vue.js"></script
复制链接

扫一扫