html 使用vue展示动画

一、简介

二、代码内容

三、问题

 

一、简介

　　因为帮人做一个静态页面，使用了vue来处理。

二、代码内容

　　1. 初始化页面内容。

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>认识</title>
        <script src="./vue.js"></script>
    </head>
    <body>
　　　　<div id="app">
　　　　</div>
    </body>
    <script>
        new Vue({
        el: "#app",
        data: {},
        methods:{}
        })
    </script>
</html>
复制代码

　　2.再vue使用动画，方法

　　在body里面添加 transition name

<transition name="start">
<div class="start-img-box"  v-show="start_show">
</div>
</transition>

　　在css 里面代码

复制代码
.start-enter-active {
      animation: demo  1s;
}
.start-leave-active {
      animation: demo linear 1s reverse;
}
        
@keyframes demo {
          /* 从左边而来 */
from {
   transform: translateX(-100%);
　}
          /* 回到左边原点 */
to {
   transform: translateX(0px);
 }
}
复制代码

　　最后在js里调用就可以使用动画

start_show_fc(){
    const that = this;
    that.start_show = true;
},

　　如果是列表，就需要使用transition-group

<transition-group name="start">
    <div v-for="(item, key) in show_list" :key="key">
　　</div>
</transition-group>

　　2. button 给按钮添加背景。

复制代码
.deal-button{
            background-image: url("https://yny-1300951025.cos.ap-chengdu.myqcloud.com/TravelGuideImg/start2.png");
            background-color: rgba(0, 0, 0, 0);
            background-size: 100% 100%;
            background-size: cover;
            box-sizing: border-box;
            padding: 0;
            border: none;
            width: 17%;
            height: 100%;
        }
复制代码

　　3. input 去掉边框。

 input {
       
        border: 0;  // 去除未选中状态边框
        outline: none; // 去除选中状态边框
        background-color: rgba(0, 0, 0, 0);// 透明背景
 
    }

　　4.vue 控制视频

<video :src="video_url"  controls="controls" style="width:100%;height:100%;" ref="vueMiniPlayer"></video>

　　js 控制 

this.$refs.vueMiniPlayer.paused;  //true  false
this.$refs.vueMiniPlayer.pause();//暂停
this.$refs.vueMiniPlayer.play();//播放

 

 

三、问题

posted @   PKGAME  阅读(34)  评论(0)  编辑  收藏  举报
相关博文：
·  vue 一些问题便签
·  vue 安装
·  ④ vue 中的动画
·  vue----动画
·  Vue2 动画与过渡
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手