1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：香妃_C 分类：Toy博客 阅读(35) 违法举报

这篇具有很好参考价值的文章主要介绍了transition 实现div伸缩动画、3D翻转动画(vue版)、elementui走马灯。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

代码

 

<template>
    <div>
        <div>

              <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">

                                              {{i.content}}

                                        </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>
效果：

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

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

transition 实现div伸缩动画、3D翻转动画(vue版)、elementui走马灯文章来源地址https://www.toymoban.com/news/detail-432896.html

到了这里，关于transition 实现div伸缩动画、3D翻转动画(vue版)、elementui走马灯的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包