transition 实现div伸缩动画、3D翻转动画(vue版)、elementui走马灯

最新推荐文章于 2024-05-16 09:32:09 发布

香妃_C

最新推荐文章于 2024-05-16 09:32:09 发布

阅读量1.5k

点赞数 1

分类专栏： transition elementui 文章标签： vue.js 3d javascript

本文链接：https://blog.csdn.net/cxf_L/article/details/127873275

版权

elementui 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

transition

2 篇文章 0 订阅

订阅专栏

代码

           <el-carousel :interval="4000" type="card" height="500px" >
           <el-carousel-item v-for="(i,index) in imageData" :key="index">
           <img :src="i.src" style="width: 100%;height: 100%;">
           </el-carousel-item>
           </el-carousel>
           <div class="news">
               <div class="inner">
                   <div class="title">
                       <span class="line"></span>
                       <span>新闻资讯</span>
                       <span class="sub_title">/NEWS</span>
                   </div>
                   <div class="pannel">
                       <div class="tabs flex">
                           <div class="flex-item">
                               <div class="tab_item " @click="newstab(1)" :class="{tab_item_active:news_tab==1}">
                                   <div>公司新闻</div>
                               </div>
                               <div class="tab_item" @click="newstab(2)" :class="{tab_item_active:news_tab==2}">
                                   <div>项目动态</div>
                               </div>
                           </div>
                           <div class="more_btn_pannel" v-if="!ismobel">
                               <span class="more_btn" @click="openPage(this,'News')">MORE</span>
                           </div>
                       </div>
                       <div class="tabitems " :class="{flex:!ismobel}">
                           <div class="flex" v-if="!ismobel" v-for="(i, index) in news"
                               :style="{ width: ((inner_width)/3) + 'px' }" :key="index">
                               <div v-if="index!=0" class="news_item_split"></div>
                               <div class="item tran" @mouseenter="drawer = true" @mouseleave="drawer = false"
                                   :style="{ width: (((inner_width)/3)-((index==0||index==(news.length-1))?15:30)-60) + 'px' }"
                                   @click="opennews(this,i.id)">
                                   <div class="item_panel">
                                       <div class="new_title">{{i.title}}</div>
                                       <div class="">
                                           <img :src="i.img" />
                                       </div>
                                       <div class="date">
                                           {{i.date}}
                                       </div>
                                       <div class="desc">

                                       </div>
                                   </div>
                               </div>
                               <div v-if="index!=news.length-1" class="news_item_split"></div>
                           </div>
                           <div class=" " v-if="ismobel" v-for="(i, index) in news" :key="index">
                               <div class="item mobelitem tran" @click="opennews(this,i.id)">
                                   <div class="item_panel flex">
                                       <div style="width:100px;">
                                           <img :src="i.img" />
                                       </div>
                                       <div class="flex-item" style="padding-left:10px">
                                           <div class="new_title">{{i.title}}</div>
                                           <div class="desc">
                                               {{i.content}}
                                           </div>
                                           <div class="date">
                                               {{i.date}}
                                           </div>
                                       </div>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
           <div class="case">
               <div class="inner">

                   <div class="flex title">
                       <div class="flex-item">
                           <span class="line"></span>
                           <span>产品推荐</span>
                           <span class="sub_title">/CASE</span>
                       </div>
                       <div class="more_btn_pannel" v-if="!ismobel">
                           <span class="more_btn" @click="openPage(this,'Case')">MORE</span>
                       </div>
                   </div>
                   <div class="pannel">
                       <CaseItem :inner_width="inner_width" :cases="cases"></CaseItem>
                   </div>
               </div>
           </div>
       </div>
   </div>
</template>
<script>
import utils from "../utils/utils.js"
   import CaseItem from "../components/CaseItem.vue"
   import TeamItem from "../components/TeamItem.vue"

   import img001 from "../assets/img001.png"
   import img002 from "../assets/img002.png"
   import img003 from "../assets/img003.png"

   import img009 from "../assets/img009.png"
   import img010 from "../assets/img010.png"
   import img011 from "../assets/img011.png"
   import img012 from "../assets/img012.png"
   import img013 from "../assets/img013.png"
   import img014 from "../assets/img014.png"
   import img015 from "../assets/img015.png"
   import img016 from "../assets/img016.png"

   import banner1 from "../assets/banner1.png"
   import banner2 from "../assets/banner2.png"
   import banner3 from "../assets/bg_img_001.png"

   export default {
       components: { //将组件注册一下才能使用
           CaseItem,
           TeamItem
       },
       data() {
           return {
               drawer: false,
               imageData: [{
                   src:banner1
               },{
                   src:banner2
               },{
                   src:banner3
               }],
               left: 0,
               banerHeight: '573px',
               news_tab: 1,
               ismobel: utils.ismobel(),
               news: [{
                   id: 1,
                   title: '外媒：乌总统公布最新伤亡数字',
                   date: '02-02',
                   img: img001,
                   content: '【俄乌开战第二日最新局势图】财联社2月25日电，俄罗斯与乌克兰武装冲突昨日正式开始后，开战已超24小时。'
               }, {
                   id: 2,
                   title: '外媒：乌总统公布最新伤亡数字',
                   date: '02-03',
                   img: img002,
                   content: '【俄乌开战第二日最新局势图】财联社2月25日电，俄罗斯与乌克兰武装冲突昨日正式开始后，开战已超24小时。'
               }, {
                   id: 3,
                   title: '外媒：乌总统公布最新伤亡数字',
                   date: '02-04',
                   img: img003,
                   content: '【俄乌开战第二日最新局势图】财联社2月25日电，俄罗斯与乌克兰武装冲突昨日正式开始后，开战已超24小时。'
               }],
               inner_width: 1024,
               cases: [
                   [{
                       id: 1,
                       name: '百度一下',
                       logo: img009
                   }, {
                       id: 2,
                       name: '百度一下',
                       logo: img010
                   }, {
                       id: 3,
                       name: '百度一下',
                       logo: img011
                   }, {
                       id: 4,
                       name: '百度一下',
                       logo: img012
                   }],
                   [{
                       id: 5,
                       name: '百度一下',
                       logo: img013
                   }, {
                       id: 6,
                       name: '百度一下',
                       logo: img014
                   }, {
                       id: 7,
                       name: '百度一下',
                       logo: img015
                   }, {
                       id: 8,
                       name: '百度一下',
                       logo: img016
                   }]
               ],
               tabitemsPaddingTop: '30px',
               tabitemsPaddingBottom: '30px',
               aboutPanelPaddingTop: '50px',
               aboutPanelPaddingBottom: '50px',
               directionPanelPaddingTop: '100px',
               directionPanelPaddingTop: '100px',
               teamdatas: [{
                   id: 1,
                   name: 'XXX',
                   job: '创始人董事长',
                   logo: img016,
                   desc: "xxxxxxxxxxxxxxxxxxxx"
               }, {
                   id: 2,
                   name: 'XXX',
                   job: '创始人董事长',
                   logo: img016,
                   desc: "xxxxxxxxxxxxxxxxxxxx"
               }, {
                   id: 3,
                   name: 'XXX',
                   job: '创始人董事长',
                   logo: img016,
                   desc: "xxxxxxxxxxxxxxxxxxxx"
               }],
           }
       },
       computed: {

       },
       mounted() {
this.$forceUpdate();
           this.inner_width = document.querySelector(".inner").offsetWidth;

           if (this.ismobel) {
               this.tabitemsPaddingTop = '10px';
               this.tabitemsPaddingBottom = '10px';
               this.aboutPanelPaddingTop = '10px';
               this.aboutPanelPaddingBottom = '10px';
               this.directionPanelPaddingTop = '10px';
               this.directionPanelPaddingTop = '10px';
               this.banerHeight = "400px";
               this.left = -((1340 - this.inner_width) / 2);
           }

       },
       methods: {
           newstab: function(index) { //点击后打开新闻详情页并传递id
               this.news_tab = index;
               this.news = [{
                   id: 1,
                   title: 'XXX项目已近发布' + new Date().getTime(),
                   date: '02-02',
                   img: img001,
                   content: '【俄乌开战第二日最新局势图】财联社2月25日电，俄罗斯与乌克兰武装冲突昨日正式开始后，开战已超24小时。'
               }, {
                   id: 2,
                   title: '外媒：乌总统公布最新伤亡数字',
                   date: '02-03',
                   img: img002,
                   content: '【俄乌开战第二日最新局势图】财联社2月25日电，俄罗斯与乌克兰武装冲突昨日正式开始后，开战已超24小时。'
               }, {
                   id: 3,
                   title: '外媒：乌总统公布最新伤亡数字',
                   date: '02-04',
                   img: img003,
                   content: '【俄乌开战第二日最新局势图】财联社2月25日电，俄罗斯与乌克兰武装冲突昨日正式开始后，开战已超24小时。'
               }];
               this.$forceUpdate();
           },
           opennews: (app, id) => { //点击后打开新闻详情页并传递id
               app.$router.push("Detail?id=" + id)
           },
           openPage: (app, page) => {
               app.$router.push(page)
           }
       }
   }
</script>
<style>
   .tran{
       height: 270px;
       overflow: hidden;
       transition-duration: 0.5s;
       transition-timing-function:ease-in-out;
       }
       .tran:hover{
       height:380px;
       }

       .el-carousel__item h3 {
   color: #475669;
   font-size: 18px;
   opacity: 0.75;
   line-height: 300px;
   margin: 0;
   }

   .el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
   }

   .el-carousel__item:nth-child(2n+1) {
   background-color: #d3dce6;
   }
   .banner {
       height: v-bind(banerHeight);
       overflow: hidden;
       /* 后续此处的高度可以根据图片的大小进行换算 */
   }

   .swiper-container {
       width: 100%;
       height: v-bind(banerHeight);
   }

   .swiper-container .banner_item {
       height: v-bind(banerHeight);
       position: relative;
   }

   .title {
       height: 60px;
       line-height: 60px;
       border-bottom: 1px solid #b5b5b5;
   }

   .title .line {
       display: inline-block;
       width: 2px;
       height: 30px;
       margin-right: 15px;
       background: #f85c29;
       vertical-align: middle;
   }

   .title span {
       font-size: 22px;
   }

   .title sub_title {
       font-size: 16px;
       color: #999999
   }

   .news {
       background: #fff;
       padding-bottom: v-bind(tabitemsPaddingTop);
   }

   .tabs {
       height: 60px;
       line-height: 60px;
   }

   .tabs .tab_item {
       height: 100%;
       width: 100px;
       text-align: center;
       font-size: 18px;
       display: inline-block;
       cursor: pointer;
   }

   .tabs .tab_item:hover {
       color: #f85c29;
   }

   .tabs .tab_item_active {
       color: #f85c29;
       border-bottom: 2px solid #f85c29;
   }

   .more_btn_pannel {
       width: 80px;
   }

   .more_btn_pannel .more_btn {
       display: inline-block;
       border: 1px solid #f85c29;
       text-align: center;
       height: 30px;
       line-height: 30px;
       font-size: 16px;
       cursor: pointer;
       width: 80px;
       color: #f85c29;
       border-radius: 30px;
   }

   .more_btn_pannel .more_btn:hover {
       color: #fff;
       background: #f85c29;
   }

   .news .tabitems {
       padding-top: v-bind(tabitemsPaddingTop);
       padding-bottom: v-bind(tabitemsPaddingBottom);
   }

   .news .news_item_split {
       width: 15px;
       height: 100px;
   }

   .news .item {
       background: #f8f8f8;
       border-radius: 3px;
       border: 2px solid #efefef;
       padding: 30px;
       cursor: pointer;
       box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
   }

   .news .mobelitem {
       background: #f8f8f8;
       border-radius: 0px;
       border: none;
       border-botom: 1px solid #efefef;
       cursor: pointer;
       box-shadow: none;
       padding: 5px 10px;
   }

   .news .item:hover {
       border: 2px solid #f85c29;
   }

   .news .mobelitem:hover {
       border: none;
       border-botom: 1px solid #efefef;
   }

   .news .item .new_title {
       height: 30px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       line-height: 30px;
       font-size: 16px;
       font-weight: bold;
   }

.news .mobelitem .new_title {}

   .news .item .img_panel {
       height: 243px;
   }

   .news .mobelitem .img_panel {
       height: 150px;
   }

   .news .item img {
       width: 100%;
   }

   .news .mobelitem img {
       width: 100%;
       height: 80%;
       margin-top: 10%;
   }

   .news .item .date {
       height: 30px;
       line-height: 30px;
       font-size: 14px;
       color: #999
   }

   .news .item .desc {
       line-height: 25px;
       font-size: 14px;
       color: #999
   }

   .news .mobelitem .desc {
       line-height: 20px;
       max-height: 40px;
       display: -webkit-box;
       /*! autoprefixer: off */
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       overflow: hidden;
   }

   .news .mobelitem .img_panel {
       height: 150px;
   }

   .about {
       padding-top: v-bind(tabitemsPaddingTop);
       background: #f8f8f8;
   }

   .about .about_panel {
       padding-top: v-bind(aboutPanelPaddingTop);
       padding-bottom: v-bind(aboutPanelPaddingBottom);
   }

   .about .about_panel .img {
       vertical-align: middle;
   }

   .about .about_panel .img img {
       vertical-align: middle;
       width: 100%;
   }

   .about .about_panel .about_desc {
       padding-left: 30px;
   }

   .about .about_panel .about_desc .about_title {
       line-height: 45px;
       height: 45px;
       font-size: 22px;
       color: #000
   }

   .about .about_panel .about_desc .about_line {
       line-height: 45px;
       vertical-align: middle;
   }

   .about .about_panel .about_desc .about_filed {
       color: #999
   }

   .about .about_panel .about_desc .about_filed_value {
       color: #000;
   }

   .direction {
       padding-top: 25px;
   }

   .direction .pannel {
       padding-top: v-bind(directionPanelPaddingTop);
       padding-bottom: v-bind(directionPanelPaddingBottom);
   }

   .direction .pannel .icon {
       text-align: center;
   }

   .direction .pannel .icon img {
       width: 50%;
   }

   .direction .pannel .direction_title {
       text-align: center;
       font-size: 20px;
       font-weight: bold;
       height: 45px;
       line-height: 45px;
   }

   .direction .pannel .direction_desc {
       font-size: 16px;
       height: 35px;
       line-height: 35px;
       color: #999;
   }

   .direction .pannel .direction-item-split {
       width: 1px;
       background: #B5B5B5;
   }

   .direction .pannel .direction_item {
       padding: 25px;
   }

   .case {
       padding-top: 25px;
       background: #f5f5f5;
   }

   .case .pannel {
       padding-top: v-bind(aboutPanelPaddingTop);
       padding-bottom: v-bind(aboutPanelPaddingBottom);
   }

   .case .line {
       margin-bottom: 20px;
   }

   .case .line .case_item_split {
       width: 15px;
       height: 10px;
   }

.case .line .case_item {}

   .case .line .case_item .case_item_inner {
       background: #fff;
       cursor: pointer;
       border: 1px solid #f8f8f8;
       box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
       border-radius: 3px;
   }

   .case .line .case_item .case_item_inner:hover {
       box-shadow: 0 0 10px 5px rgba(248, 92, 41, 0.3);
   }

   .case .line .case_item .case_item_inner .case_item_logo {
       text-align: center;
       vertical-align: middle;
       align-items: center
   }

   .case .line .case_item .case_item_inner .case_item_logo img {
       max-width: 100%;
       align-items: center
   }

   .case .line .case_item .case_item_inner .desc {
       text-align: center;
       height: 60px;
       line-height: 60px;
       color: #999;
   }

   .team {
       padding-top: 25px;
   }

   .team .pannel {
       padding-bottom: 50px;
   }

   .team .pannel .desc {
       line-height: 35px;
       font-size: 16px;
       text-indent: 2em
   }
</style>
效果：