How do I use the transition property?

[zhang6685979]

How can transition attributes be used in conjunction with animate.css?

[RobinCK]

HI @zhang6685979 I need to try, it will take some time.

[RobinCK]

Hi @zhang6685979 Please update library to 1.1.1 and usage enter-active-class, leave-active-class props for css animate classes

Example: https://jsfiddle.net/Robin_ck/3oxhsunm/

Also you can use transition props for vuejs transition

[Bronco84]

I haven't been able to get transitions to work. I can see the name of the transition is successfully passed as a prop, but it doesn't seem to be properly setting up the transition element as I cannot see any transition class being added and removed. I've looked at the template of the vue-popper and it appears pretty straightforward, so it may be something I am doing. Any guidance would be appreciated.

[victor-ponamariov]

+1 didn't work for me

[RobinCK]

I don't quite understand the problem you saw the example above? Please make an example on jsfiddle

[paulrosen]

This is my attempt at a transition. I think I'm missing something fundamental about how it is supposed to work:

<template>
  <popper trigger="hover" :options="{placement: 'bottom'}" enter-active-class="animated fade" leave-active-class="animated fade">
    <div class="popper">
      <slot name="body"></slot>
    </div>

    <template slot="reference">
       <slot name="reference"></slot>
    </template>
  </popper>
</template>

<script>
  import Popper from 'vue-popperjs';
  import 'vue-popperjs/dist/css/vue-popper.css';

  export default {
    name: 'tooltip-wrapper',
    components: {
      'popper': Popper
    },

  }
</script>

<style scoped lang="scss">
  .popper {
    background-color: #3C455C;
    padding: 5px;
    box-shadow: none;
    color: #ffffff;
    border-radius: 8px;
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity 2.5s;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }

</style>

[EDIT] I needed to do two things to make it work: remove "scoped" from the styles and spell out the classes like this:

enter-active-class="fade-enter fade-enter-active" leave-active-class="fade-leave fade-leave-active"

[nblackburn]

In order to animate Popper instances, you need to wrap the popper element in a div and add the transitions to that.

Be careful not to kill the instance before the animation has finished.

<div class="dont-animate-me" x-placement="bottom-start" style="position: absolute; transform: translate3d(10px, 37px, 0px); top: 0px; left: 0px; will-change: transform;">
    <div class="animate-me">
        <div class="your-popper"></div>
    </div>
</div>

[weotch]

I got it working through:

<template>
  <vue-popper 
    transition='fade'
    enter-active-class='fade-enter-active'
    leave-active-class='fade-leave-active'
  </vue-popper>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 2.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

In other words, I needed both the transition and the active classes

[laneelliott]

I am unable to get the vue-popper animation working. I can see the animation classes being added to the popper element but the animation doesn't work. I believe the issue has to do with the append-to-body attribute, however I need that in order to get the popper to appear correctly within the project that I was handed.

<template>
    <popper
        :trigger="trigger"
        transition="fade"
        enter-active-class="fade-enter fade-enter-active"
        leave-active-class="fade-leave fade-leave-active"
        append-to-body
        :options="{
            placement: placement,
            modifiers: { offset: { offset: '0, 5px' }}
    }">
        <div class="popper" :class="align ? 'text-' + align : 'text-left'">
            <div v-if="$attrs.content">{{$attrs.content}}</div>
            <slot v-else name="content"></slot>
        </div>

        <span slot="reference">
            <slot></slot>
        </span>
    </popper>
</template>

<script>
import Popper from 'vue-popperjs';

export default {
    name: 'AppTooltip',
    components: {
        'popper': Popper
    },
    props: {
        trigger: {
            type: String,
            default: 'hover'
        },
        placement: {
            type: String,
            default: 'top'
        },
        align: {
            type: String,
            default: 'left'
        }
    }
}
</script>

<style lang="stylus">
    .fade-enter-active, .fade-leave-active
        transition: opacity .5s;

    .fade-enter, .fade-leave-to
            opacity: 0;

    .popper
        &.text-left
            text-align: left
        &.text-right
            text-align: right
        &.text-center
            text-align: center
    
    .popper
        width: auto;
        background: #303133;
        color: #fff;
        text-align: center;
        padding: 10px;
        display: inline-block;
        border-radius: 4px;
        position: absolute;
        font-size: 12px;
        font-weight: normal;
        border: 0px #303133 solid;
        z-index: 200000;

    .popper .popper__arrow
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
        margin: 5px;

    .popper[x-placement^="top"]
        margin-bottom: 5px;

    .popper[x-placement^="top"] .popper__arrow
        border-width: 5px 5px 0 5px;
        border-color: #303133 transparent transparent transparent;
        bottom: -5px;
        left: calc(50% - 5px);
        margin-top: 0;
        margin-bottom: 0;

    .popper[x-placement^="bottom"]
        margin-top: 5px;

    .popper[x-placement^="bottom"] .popper__arrow
        border-width: 0 5px 5px 5px;
        border-color: transparent transparent #303133 transparent;
        top: -5px;
        left: calc(50% - 5px);
        margin-top: 0;
        margin-bottom: 0;

    .popper[x-placement^="right"]
        margin-left: 5px;

    .popper[x-placement^="right"] .popper__arrow
        border-width: 5px 5px 5px 0;
        border-color: transparent #303133 transparent transparent;
        left: -5px;
        top: calc(50% - 5px);
        margin-left: 0;
        margin-right: 0;

    .popper[x-placement^="left"]
        margin-right: 5px;

    .popper[x-placement^="left"] .popper__arrow
        border-width: 5px 0 5px 5px;
        border-color: transparent transparent transparent #303133;
        right: -5px;
        top: calc(50% - 5px);
        margin-left: 0;
        margin-right: 0;
</style>

[rafalolszewski94]

You can't use transform for transitions cause it will break positioning of popper.js - so we could say most of the transitioning for this component is useles

[raunicorn]

I got it working through:

<template>
  <vue-popper 
    transition='fade'
    enter-active-class='fade-enter-active'
    leave-active-class='fade-leave-active'
  </vue-popper>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 2.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

In other words, I needed both the transition and the active classes

Based on this, I had to use a container in the slot and do the transition on this container. Something like this:

.fade-enter-active,
.fade-leave-active{
    transition: opacity 200ms;
    .container{
        transition: opacity 200ms;
    }
}

[juanpablob]

Still there's no official documentation about how to use the transition option? Is the author still maintaining the repo or is it abandoned?