Vue js как анимировать радиус границы - PullRequest
Новая
       13

Vue js как анимировать радиус границы

0 голосов
/ 15 февраля 2020

Итак, я новичок в Vue. js, и у меня есть этот псевдоэлемент, который должен получать радиус границы всякий раз, когда добавляется класс animateBr. Я думал о том, чтобы сделать это и использовать простой переход CSS, но это, похоже, не работает ...

Радиус границы изменяется, но на самом деле он не изменяется. Как я могу это исправить? 

.content-wrapper:after {
    content: '';
    position: absolute;
    background: url(../img/background_bi.png);
    background-size: cover;
    background-position-x: 240px;
    background-position-y: -110px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-bottom-right-radius: 0px;
    box-shadow: 0 0 48px 20px rgba(0,0,0,0.7);
}

.content-wrapper.animateBr:after {
    border-bottom-right-radius: 200px;
    -webkit-transition: border-radius 1s;
    transition: border-radius 1s;
}

- 

import Fieldset from '../Fieldset'
import SwitchButton from '../Buttons/SwitchButton'

export default {
    name: 'Content',
    props: ['cust', 'refCode', 'distribution'],
    components: {
        Fieldset,
        SwitchButton
    },
    data() {
        return {
            distSwitch: this.distribution !== "preferred_dealer",
            form: {
                name: this.cust.first_name + ' ' + this.cust.last_name,
                address: this.cust.address,
                email: this.cust.email,
                code: this.refCode,
                dist: this.distribution
            }
        }
    },
    mounted() {
        setTimeout(() => {
            document.getElementsByClassName('content-wrapper')[0].classList.add('animateBr')
        }, 5000)
    }
}

/ views / General. vue

<template>
    <div class="content-wrapper" id="general">
      <Header :title="pageTitle"></Header>
      <Content 
        :page="$route.name"
        :cust="persoParams"
        :refCode="ref"
        :distribution="distribution"
      ></Content>
      <NextPageButton></NextPageButton>
    </div>
</template>
...