Использование отказов анимации на масштабируемом элементе

Вам все еще нужно .all(), чтобы получить список элементов вашего отношения:

for this one in attendees:
    print(thisone.attendingmembers.all())

Btw, вы хотите получить все attendingmembers или только те, которые имеют право calendar_id ?

attendees = Member.objects.filter(attendingmembers__calendar_id=id).prefetch_related('attendingmembers')
# return all Members having at least one attendingmember with calendar_id=id, and prefetch all of their attendingmembers

attendees = Member.objects.filter(attendingmembers__calendar_id=id).prefetch_related(Prefetch('attendingmembers', queryset=Attendee.objects.filter(calendar_id=id)))
# return all Members  having at least one attendingmember with calendar_id=id, and prefetch their attendingmembers matching the filter

В документации показано, как использовать аргумент to_attr в объектах Prefetch;)

2
задан Harper Creek 19 January 2019 в 01:53
поделиться

1 ответ

Всего лишь серия анимаций jquery, которые изменяются на заданное количество пикселей, должны помочь. Вы всегда можете использовать что-то вроде parseInt($('#test').css('width')) в математике для определения того, сколько нужно изменить, если вы хотите, чтобы масштабированные объекты отскакивали больше / меньше

function scaleUp() {
    var image = document.getElementById('test');
    image.style.WebkitTransform = ('scale(2,2)');
}

function bounce() {
  $('#test').animate({
      'width': "-=20",
      'height': "-=20"
  }, 150);
  $('#test').animate({
      'width': "+=30",
      'height': "+=30",
  }, 150);
  $('#test').animate({
      'width': "-=20",
      'height': "-=20",
  }, 150);
  $('#test').animate({
      'width': "+=10",
      'height': "+=10",
  }, 150);
}
div#test  {
        position:relative;
        display: block;
        width: 50px;
        height: 50px;
        background-color: blue;
        margin: 50px auto;
        
    }
            
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'> </div> 

<button class = 'butt' onclick = 'bounce()'>Bouncey</button>
<button class = 'butt' onclick = 'scaleUp()'>Scale up bouncey</button>

Здесь они объединены в одно с анимацией для роста / сжатия:

function scaleUp() {
    var image = document.getElementById('test');
    image.style.WebkitTransform = ('scale(2,2)');
}

function bounce() {
  const width = parseInt($('#test').css('width'));
  const height = parseInt($('#test').css('height'));
  $('#test').animate({
      'width': parseInt($('#test').css('width'))*2.2,
      'height': parseInt($('#test').css('height'))*2.2
  }, 300);
  $('#test').animate({
      'width': "-=20",
      'height': "-=20"
  }, 150);
  $('#test').animate({
      'width': "+=30",
      'height': "+=30",
  }, 150);
  $('#test').animate({
      'width': "-=20",
      'height': "-=20",
  }, 150);
  $('#test').animate({
      'width': "+=10",
      'height': "+=10",
  }, 150);
  $('#test').animate({
      'width': width,
      'height': height
  }, 300);
}
div#test  {
        position:relative;
        display: block;
        width: 50px;
        height: 50px;
        background-color: blue;
        margin: 50px auto;
        
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'> </div> 

<button class = 'butt' onclick = 'bounce()'>Bouncey</button>
[ 119]

0
ответ дан Asthmatic 19 January 2019 в 01:53
поделиться
Другие вопросы по тегам:

Похожие вопросы: