主页 / 网络编程 /

vue动画效果实现方法示例

网络编程 2021-07-04 15:50www.168986.cn编程入门
这篇文章主要介绍了vue动画效果实现方法,结合完整实例形式分析了vue.js+animate.css实现的动画切换效果相关操作技巧,需要的朋友可以参考下

本文实例讲述了vue动画效果实现方法。分享给大家供大家参考，具体如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>.jb51. vue动画</title>
  <script src="https://cdn.bootcss./vue/2.4.4/vue.min.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcss./animate.css/2.0/animate.css" rel="external nofollow" />
  <style>
    #box{
      width:400px;
      margin: 0 auto;
    }
    #div1{
      width:100px;
      height:100px;
      background: red;
    }
  </style>
</head>
<body>
  <div id="box">
    <input type="button" value="按钮" @click="toggle">
    <div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
  </div>
  <script>
    new Vue({
      el:'#box',
      data:{
        bSign:true
      },
      methods:{
        toggle(){
          this.bSign=!this.bSign;
        }
      },
      transitions:{ //定义所有动画名称
        bounce:{
          enterClass:'zoomInLeft',//动画进入
          leaveClass:'zoomOutRight'//动画离开
        }
      }
    });
  </script>
</body>
</html>

运行效果

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

上一篇：详解在React项目中安装并使用Less（用法总结） 下一篇：node.js实现微信开发之获取用户授权

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by